
- HTML 教程
- HTML - 首页
- HTML - 路线图
- HTML - 简介
- HTML - 历史与演变
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块
- HTML - 样式表
- HTML - 格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图片
- HTML - 图片地图
- HTML - Iframes
- HTML - 短语元素
- HTML - 元标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表格标题与标题
- HTML - 表格样式
- HTML - 表格 Colgroup
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 邮件链接
- HTML 颜色名称与值
- HTML - 颜色名称
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 页眉
- HTML - Head 元素
- HTML - 添加 Favicon
- HTML - Javascript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - 使用 CSS 进行布局
- HTML - 响应式设计
- HTML - 符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - Canvas
- HTML API
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 杂项
- HTML - 文档对象模型 (DOM)
- HTML - MathML
- HTML - 微数据
- HTML - IndexedDB
- HTML - Web 消息传递
- HTML - Web CORS
- HTML - Web RTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - 网页幻灯片
- HTML 工具
- HTML - Velocity Draw
- HTML - 二维码
- HTML - Modernizer
- HTML - 验证
- HTML - 颜色拾取器
- HTML 参考
- HTML - 速查表
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 码
- ASCII 码表查找
- HTML - 颜色名称
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- 语言 ISO 代码
- HTML - 字符编码
- HTML - 已弃用标签
- HTML 资源
- HTML - 快速指南
- HTML - 有用资源
- HTML - 颜色代码生成器
- HTML - 在线编辑器
HTML - DOM Style 对象 cursor 属性
HTML DOM Style 对象 **cursor** 属性用于设置或获取鼠标指针要显示的光标类型。
语法
设置 cursor 属性object.style.cursor= value;获取 cursor 属性
object.style.cursor;
属性值
值 | 描述 |
---|---|
alias | 表示要创建某个事物的快捷方式或别名。 |
all-scroll | 表示可以向任何方向滚动。 |
auto | 这是默认属性,浏览器会设置光标。 |
cell | 表示可以选择表格单元格或单元格集 |
context-menu | 表示上下文菜单可用。 |
col-resize | 表示可以水平调整列的大小。 |
copy | 表示要复制某些内容。 |
crosshair | 在此属性值中,光标呈现为十字准线。 |
default | 表示默认光标,通常是箭头。 |
e-resize | 表示要将框的边缘向右移动。 |
ew-resize | 表示双向光标。 |
help | 表示有帮助信息可用。 |
move | 表示要移动某些内容。 |
n-resize | 表示要将框的边缘向上移动。 |
ne-resize | 表示要将框的边缘向上和向右移动。 |
nesw-resize | 表示双向调整大小的光标。 |
ns-resize | 表示双向调整大小的光标。 |
nw-resize | 表示要将框的边缘向上和向左移动。 |
nwse-resize | 表示双向调整大小的光标。 |
no-drop | 表示此处无法放置拖动的项目。 |
none | 表示不为元素呈现光标。 |
not-allowed | 表示不会执行请求的操作。 |
pointer | 表示光标为指针,并表示链接。 |
progress | 表示程序繁忙。 |
row-resize | 表示可以垂直调整行的大小。 |
s-resize | 表示要将框的边缘向下移动。 |
se-resize | 表示要将框的边缘向下和向右移动。 |
sw-resize | 表示要将框的边缘向下和向左移动。 |
text | 表示可以选择文本。 |
URL | 表示自定义光标的 URL 的逗号分隔列表。如果无法使用任何 URL 定义的光标,则在列表的末尾指定通用光标。 |
vertical-text | 表示可以选择垂直文本。 |
w-resize | 表示要将框的边缘向左移动。 |
wait | 表示程序繁忙。 |
zoom-in | 表示可以放大某些内容。 |
zoom-out | 表示可以缩小某些内容。 |
initial | 用于将此属性设置为其默认值。 |
inherit | 用于继承其父元素的属性。 |
返回值
它返回一个字符串值,该值表示当鼠标指针位于元素上时显示的鼠标光标。
HTML DOM Style 对象“cursor”属性的示例
以下示例说明了 cursor 属性的不同属性值。
设置各种光标值
在以下示例中,我们将光标更改为指针、单元格、放大和十字准线。
<!DOCTYPE html> <html lang="en"> <head> <title> HTML DOM Style Object cursor Property </title> </head> <body> <button onclick="crosshair()">Crosshair</button> <button onclick="pointer()">Pointer</button> <button onclick="cell()">Cell</button> <button onclick="zoomin()">Zoom-in</button> <p id="cursor"> This paragraph is for you to try different cursors. </p> <script> function crosshair() { document.getElementById("cursor") .style.cursor = "crosshair"; } function pointer() { document.getElementById("cursor") .style.cursor = "pointer"; } function cell() { document.getElementById("cursor") .style.cursor = "cell"; } function zoomin() { document.getElementById("cursor") .style.cursor = " zoom-in"; } </script> </body> </html>
将光标值设置为“wait”和“move”
以下示例说明了 cursor 属性的其他一些示例,例如 wait、move、help 和 ns-resize。
<!DOCTYPE html> <html lang="en"> <head> <title> HTML DOM Style Object cursor Property </title> </head> <body> <button onclick="help()">Help</button> <button onclick="move()">Move</button> <button onclick="nsresize()">ns-resize</button> <button onclick="wait()">Wait</button> <p id="cursor"> This paragraph is for you to try different cursors. </p> <script> function help() { document.getElementById("cursor") .style.cursor = "help"; } function move() { document.getElementById("cursor") .style.cursor = "move"; } function nsresize() { document.getElementById("cursor") .style.cursor = "ns-resize"; } function wait() { document.getElementById("cursor") .style.cursor = "wait"; } </script> </body> </html>
支持的浏览器
属性 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
cursor | 是 1 | 是 12 | 是 1 | 是 1.2 | 是 7 |
html_dom_style_object_reference.htm
广告