How to disable a CSS class with javascript on window.load() - html

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();
​

Answer 2

Using jquery:
$('.rtsULmenuLeft').removeClass('rtsULmenuLeft');

Answer 3

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