Changing the attribute of a class by javascript?

How can I change of attribute of a class by javascript?

Lets say I have this line:

<div class='myClass'></div>

PHP:

And I want to change the background of the div by javascript.

Any suggestions guys?

 

Why javascript?

 

If you give that div an id value you could do it like this:

document.getElementById("theDivId").className = "theNewClass";

Code (markup):

I think that's right anyway...hope it helps

 

What else then?

 

Just change the CSS? I don't understand - you want to make an exception?

 

Lets say I want to change something onclick, for example I want to change the background color of all the tables when the user clicks on a button.

 

Ah, I see. Just use separate stylesheets and tell the document to call on the second one onClick?

 

I didn't know I can call anther stylesheet on the run. Do you mean that if for example I use style1.css on a document I can add style2.css later?

How do I do it?

 

Make a JavaScript if...else function that tells it to change in the header, then add onClick="functionName" to the div.

 

NinjaNoodles
You talk like university lecturers .

My question is how to change it on the header. And by this I don't mean seudo code but the code itself. For example if I want to change the title of a page I use: document.title = "a new title"; Now what is the code for changing the stylesheet?

Edit: I guess I found it: I haven't tested it yet though, it is: document.styleSheets(0).href = "newstyle.css";

Thanks for help.

 

using 2 stylesheets is a overkill..

simple js can do the job

 

I guess you're right, varunkrish. You could probably just tell it to change the single attribute rather than call on another stylesheet.

I'm still somewhat new to JavaScript, so I wouldn't be the best person to ask.

 

There are several ways to do it. As I like to think of 'classes' as attributes, I use the get/setattribute methods.

//Set your Element your class is in
	var myElement = document.getElementsByTagName("div");
//Set the class you are searching for
	var mySetClass = "myclass";
//Set the class you want to change it to.
	var myNewClass = "newclass"

//Loop through all the 'myElement' in the document		
	for (var i=0; i < myElement.length; i++) {
//Assign the class values to the variable 'theClasses'
		var theClasses = myElement[i].getAttribute("class")
//Until the the class you are looking for = MyClass
		if ((theClasses) == mySetClass) {
//Then set that class to the new class name
			myElement[i].setAttribute("class",myNewClass)
		}
	}

Code (markup):

	var myElement = document.getElementsByTagName("div");
	var mySetClass = "myclass";
	var myNewClass = "newclass"

	for (var i=0; i < myElement.length; i++) {
		var theClasses = myElement[i].getAttribute("class")
		if ((theClasses) == mySetClass) {
			myElement[i].setAttribute("class",myNewClass)
		}
	}

Code (Without comments):

You can also change the styles, without changing the classes.

Finally the defacto function for this is

function getElementsByClassName(oElm, strTagName, oClassNames){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    var arrRegExpClassNames = new Array();
    if(typeof oClassNames == "object"){
        for(var i=0; i<oClassNames.length; i++){
            arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
        }
    }
    else{
        arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
    }
    var oElement;
    var bMatchesAll;
    for(var j=0; j<arrElements.length; j++){
        oElement = arrElements[j];
        bMatchesAll = true;
        for(var k=0; k<arrRegExpClassNames.length; k++){
            if(!arrRegExpClassNames[k].test(oElement.className)){
                bMatchesAll = false;
                break;                      
            }
        }
        if(bMatchesAll){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

Code (markup):

 

Nice job, AdamSee.