更改链中的 css 属性 - JavaScript

Change css property in chain - JavaScript

本文关键字：属性 JavaScript css      更新时间：2023-09-26

我正在使用MooTools 1.4.5，我想在调用需要一些时间的函数之前更改光标，并在完成相同的函数后将光标设置为默认值。我没有成功。

之后，我做了一个简单的例子来通过普通的JavaScript（没有jQuery或MooTools插件）更改背景颜色，但我再次没有成功。

这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
    <script type="text/javascript">
    <!--
        document.body.style.background = 'red';
        setTimeout(function () {  }, 1250);
        document.body.style.background = 'yellow';
    //-->    
    </script>
</html>

首先，我将背景颜色设置为红色，然后延迟设置为黄色。我假设背景颜色将bi设置为红色，延迟后设置为黄色。它不起作用。加载页面时，背景颜色为黄色（最后一行）。如果我在设置背景颜色的行中间插入警报功能，一切正常（背景颜色为红色，单击消息框，背景颜色为黄色）。为什么会这样工作？只有上次更改的样式会受到影响。我需要这样的东西来更改指针，然后调用需要 10 秒的函数，并在函数完成后将光标设置为默认值。

setTimeout并不意味着"等待"。它稍后调用你给它的函数。执行流程立即继续：

document.body.style.background = 'red';
setTimeout(function () {
    document.body.style.background = 'yellow';
}, 1250);

因此，这也有效：

setTimeout(function () {
    document.body.style.background = 'yellow';
}, 1250);
document.body.style.background = 'red';

对于光标的情况，只需将.background = 'red'替换为.cursor = 'wait'，.background = 'yellow'替换为.cursor = 'default'。

document.body.style.cursor = 'wait';
setTimeout(function() {
    doSomethingExpensive();
    document.body.style.cursor = 'default';
}, 10);
setTimeout()的第一个

参数是一个回调函数，延迟后会调用，应该使用这种代码：

document.body.style.background = 'red';
document.body.style.cursor = 'wait';
setTimeout(function(){ 
   document.body.style.background = 'yellow'; 
   document.body.style.cursor = 'default';
}, 1250);
body { 
    width: 100%;
    height: 100%;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum.

在此处查看有关 setTimeout 的更多信息

相关文章：