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

コードはいくつかの理由で冗長であり、他の理由では不完全です。

まず、getComptedStyleIEの以前のバージョンには存在しません。代わりに、currentStyleプロパティを使用します。ありがたいことに、これをシムするのはとてつもなく簡単です。

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

nullこれで解決したので、完全に冗長であるため、その引数を削除します。実際、私は2番目の議論があることすら知りませんでしたが、それは私だけですgetComputedStyle 。

次に、その呼び出しの代わりに.cursor（または）を取得するだけでカーソルプロパティを取得できます（これも私は聞いたことがありません...）。プロパティが設定されていない場合は、空の文字列を返すため、ドロップすることもできます。['cursor'].getPropertyCSSValue|| ""getComputedStylecursor

スペースをトリミングする必要はありませんが、安全のために小文字に切り替えるのは良い考えのようです。

...しかし、直後にtoLowerCase()、単語の3つの異なる時価総額を確認しますか？本当に？

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 に答える