使用 JavaScript 更改鼠标指针

简介: 使用 JavaScript 更改鼠标指针

文档对象模型 (DOM) 是标记语言文档(HTML 和 XML)的编程接口。它定义了文档的逻辑结构以及如何访问和修改文档。

DOM 以结构化和分层的方式呈现网页,使开发人员和用户更容易浏览文档。

使用 DOM,我们可以使用 Document 对象提供的方法或命令轻松访问和操作标签、id、类、属性或元素。

今天的文章将教授如何使用 JavaScript 更改鼠标指针。有两种方法可以使用查询选择器更改鼠标指针或通过标签访问特定元素。

[在 JavaScript 中使用 getElementsByTagName() 来更改的光标指针]

getElementsByTagName() 是 JavaScript 的内置 document 方法并返回其标签与指定 tag 名称匹配的 NodeList 对象/元素。

返回活动的 HTML 集合,包括搜索中的根节点。

语法:

document.getElementsByTagName(name);

getElementsByTagName() 将其 name 作为输入参数。它是一个必需参数,用于指定必须匹配的 HTML 属性的 tagName

如果找到任何匹配的元素,则返回匹配的 DOM 元素对象;否则,它返回 null

getElementsByTagNamequerySelectorAll 之间的唯一区别是它首先只选择那些指定标签名称与指定标签名称匹配的元素。相比之下,querySelectorAll 可以使用任何具有更大灵活性和功能的选择器。

getElementsByTagName 还返回活动节点列表,而 querySelectorAll 返回静态节点列表。活动节点列表允许在 DOM 更改时立即更新结果,这不需要激活查询。

例子:

<p>Hello World</p>
<br/>
<p>Welcome to my article</p>
const pElement = document.getElementsByTagName("p")[0];
pElement.style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
console.log(pElement.style.cursor);

我们在上面的代码中定义了两个带有 p 标签的元素。

当我们使用 getElementsByTagName() 访问文档时,它会查找其标签与给定标签匹配的所有节点并返回 NodeList。然后将光标样式设置为请求的 URL。

[使用 querySelectorAll() 更改 JavaScript 中的光标指针]

querySelectorAll() 是 JavaScript 提供的内置文档方法,它返回选择器与指定选择器匹配的 Element/NodeList 对象。

你可以更改更多选择器。如果传递了无效的选择器,则会引发语法错误。

语法:

document.querySelectorAll(selectors);

有关详细信息,请参阅 querySelectorAll 方法文档。

例子:

<p>Hello World</p>
<br/>
<p>Welcome to my article</p>
const pElement = document.querySelectorAll("p")[0];
pElement.style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
console.log(pElement.style.cursor);

我们在上面的代码中定义了两个带有 p 标签的元素。当我们使用 querySelectorAll() 访问文档时,它会查找其标签与给定标签匹配的所有节点并返回 NodeList。

由于 querySelectorAll 返回一个数组,我们可以提取第一个匹配元素 [0]。如果找到多个随机元素,你可以迭代矩阵并更改所有值的光标样式。

相关文章
|
6月前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
|
15天前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
60 10
|
12天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
25 4
|
4月前
超好看的鼠标指针 折纸Gami
折纸风格的鼠标指针、共九种颜色风格:白、橙、粉、红、黄、蓝、绿、青、紫;三种尺寸:X32、X48、X64;一般情况下100%DPI推荐使用X48、大于125%DPI推荐使用X64版本!
79 6
|
5月前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
39 1
|
4月前
|
JavaScript
JS 【详解】双指针排序 -- 数组合并后递增排序
JS 【详解】双指针排序 -- 数组合并后递增排序
29 0
|
5月前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
75 1
|
4月前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
26 0
|
5月前
|
JavaScript
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
282 0
|
6月前
|
JavaScript 前端开发
JavaScript实现点击鼠标弹钢琴的效果
JavaScript实现点击鼠标弹钢琴的效果
30 0