Question

I want to disable a CSS class when the page loads. I have the class .rtsULmenuLeft:

   .rtsULmenuLeft
    {
        list-style:none;
        margin: 0;
        padding: 0;
    }

All instances of the style need to be disabled. How can I do this?

In ListStyle Image iam using custom image. It is displaying and again hidden at last. That is, with bullet marks it is displaying again. I need to have that custom image to be present. Thanks.

Answer 1

Here is a working example of what you have requested: http://jsfiddle.net/ALLew/

In the example:

• all ULs are yelow
• items with class rtsULmenuLeft are red
• items with class rtsULmenuRight are blue

As you can see, the rtsULmenuLeft classNames are removed, and the lists are displayed yellow.

// Define a function to run on page load.
var loadCheck = function() {
    // Cancel the function if the page isn't loaded...
    if(document.readyState !== "complete") {
        // ... but call it again in 100 milliseconds.
        setTimeout(loadCheck, 100);
        return;
    }

    // From here on, the page is loaded.
    // Obtain a list of all elements with the particular class name
    var elList = document.getElementsByClassName("rtsULmenuLeft");

    // Loop over the elements until there are no longer any with the class.
    while(elList.length > 0) {
        // For each element, remove the class.
        elList[0].className = elList[0].className.replace(
            /\brtsULmenuLeft\b/,    // RegExp of class name in word boundaries
            ""                      // Replace with empty string - remove it.
        );
    }
};

loadCheck();
​