Question

我正在尝试为页面中具有特定计算样式属性的元素添加内联样式。

例如：

<head>
    <style>
        p.mim {
            cursor:pointer;
        }

        a.fif {
            cursor:pointer;
        }

    </style>
</head>
<body>
     <p class="mim">prova</p>
     <a class="fif">prova</a>
</body>

我想为每个在计算样式中设置“cursor：pointer”的元素添加内联样式“cursor：wait”：

<body>
    <p class="mim" style="cursor:wait;">prova</p>
    <a class="fif" style="cursor:wait;">prova</a>
</body>

这就是我的尝试：

var elms = document.getElementsByTagName("*");
for (var j = 0; j < elms.length; j++) {

    var crs = getComputedStyle(elm, null).getPropertyCSSValue('cursor') || "";
    crs = crs.replace(/\s/g, "").toLowerCase();

    switch (crs) {
        case "pointer":
        case "Pointer":
        case "POINTER":
            elm.style.cursor = "wait";
            break;
    }
});

Answer 1

由于多种原因，您的代码是多余的，而其他代码则不完整。

首先，早期版本的IE中不存在getComptedStyle。他们改为使用currentStyle属性。谢天谢地，这很简单：

if( typeof getComputedStyle == "undefined") getComputedStyle = function(elem) {return elem.currentStyle;};

现在已经解决了，删除null参数，因为它完全是多余的。实际上，我甚至不知道getComputedStyle 有第二个论点，但那只是我。

接下来，只需获取.cursor（或['cursor']）而不是.getPropertyCSSValue调用（我再也听不到......），您就可以获取游标属性。您还可以删除|| ""，因为如果尚未设置getComputedStyle属性，cursor将返回空字符串。

你不需要修剪空格，但为了安全起见，切换到小写似乎是一个好主意。

...但是，在toLowerCase()之后，你会立即检查这个词的三个不同的首字母？真的？

此外，您永远不会定义elm（这是您实际问题所在的位置），您应该缓存elms.length的值。

最终代码应如下所示：

if( typeof getComputedStyle == "undefined") getComputedStyle = function(elem) {return elem.currentStyle;};
var elms = document.getElementsByTagName("*"), l = elms.length, i;
for( i=0; i<l; i++) {
    if( getComputedStyle(elms[i]).cursor.toLowerCase() === "pointer") {
        elms[i].style.cursor = "wait";
    }
}

如果你想要撤消这个，你需要存储一个你正在修改的元素数组，循环它并删除样式（.style.cursor = "";）。

Javascript：为页面中具有特定计算样式属性的元素添加内联样式

1 个答案: