2

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

例如：

<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;
    }
});
4

1 回答 1

1

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

首先，getComptedStyle在早期版本的 IE 中不存在。他们改为使用该currentStyle物业。值得庆幸的是，很容易对此进行填充：

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

既然已经解决了这个问题，请删除该null论点，因为它完全是多余的。实际上，我什至不知道getComputedStyle 有第二个论点，但那只是我。

接下来，您可以通过获取.cursor(or ['cursor']) 而不是该.getPropertyCSSValue调用来获取 cursor 属性（这也是我从未听说过的......）。如果该属性尚未设置，您也可以删除|| ""因为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 = "";)。

于 2012-05-26T20:39:10.843 回答