Home/ Questions/Q 8009815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:33:22+00:00

I’m trying to add an inline style to elements in a page that have

  • 0

I’m trying to add an inline style to elements in a page that have a specific computed style attribute.

For instance:

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

        a.fif {
            cursor:pointer;
        }

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

I want to add an inline style “cursor:wait” to each element that has “cursor:pointer” set in the computed style:

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

This is what I tried:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code is redundant for several reasons, and incomplete for others.

    Firstly, getComptedStyle doesn’t exist in earlier versions of IE. They instead use the currentStyle property. Thankfully it is absurdly easy to shim this:

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

    Now that that’s been solved, remove that null argument as it is completely redundant. Actually, I didn’t even know getComputedStyle had a second argument, but that’s just me.

    Next, you can get the cursor property just by getting .cursor (or ['cursor']) instead of that .getPropertyCSSValue call (which again I have never heard of…). You can also drop the || "" since getComputedStyle will return an empty string if the cursor property has not been set.

    You don’t need to trim spaces, but switching to lowercase seems like a good idea just to be on the safe side.

    … But then, immediately after toLowerCase(), you check THREE different capitalisations of the word? Really?

    Additionally, you never define elm (which is where your actual problem is), and you should cache the value of elms.length.

    The final code should look like:

    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";
    }
}

    If you want to be able to undo this, you will need to store an array of elements that you’re modifying, loop through it and remove the style (.style.cursor = "";).

    • 0