在 JavaScript 中设置光标等待

在 JavaScript 中，我们可以使用CSS的cursor属性来设置网页中光标的样式。其中，wait鼠标样式表示正在进行任务，需要等待。下面介绍如何在 JavaScript 中使用CSS来设置光标等待。

方法一：设置全局CSS样式

在CSS文件中设置全局CSS样式如下。

html,body {
  cursor: wait;
}

或者在 JavaScript 文件中使用以下代码片段。

document.body.style.cursor = 'wait';

方法二：设置单独元素的CSS样式

在CSS文件中设置单独元素的CSS样式如下。

#element-id {
  cursor: wait;
}

或者在 JavaScript 文件中使用以下代码片段。

document.getElementById('element-id').style.cursor = 'wait';

方法三：在动态创建的元素中设置CSS样式

在动态创建的元素中设置CSS样式时，需要在该元素创建完成后再设置CSS样式。以下是一个示例代码。

// 创建一个新的div元素
let newDiv = document.createElement('div');
// 添加一些文本到div中
let newContent = document.createTextNode('等待中...');
newDiv.appendChild(newContent);
// 把新的div元素添加到文档中
let currentDiv = document.getElementById('div1');
document.body.insertBefore(newDiv, currentDiv);
// 设置鼠标样式为等待
newDiv.style.cursor = 'wait';

使用以上方法，我们可以在 JavaScript 中轻松设置光标等待。