access a css class with javascript?

Hello Experts,
Is it possible to access a css class with javascript? I have been researching it but it seems to not be related to html/css classes.

I would like to do something like this but menuBar2 is a class, not an id.
document.getElementById("menuBar2").style.backgroundColor = "#06F";

Is it possible?
Thanks,
rhyno99
rhyno99Asked:
Who is Participating?
 
Rikin ShahConnect With a Mentor Microsoft Dynamics CRM ConsultantCommented:
Hi Rhyno99,

Not sure if you can add styles properties to class as you mentioned above in your question. But you can always change the class like shown in the example.
http://www.digimantra.com/tutorials/change-a-css-class-dynamically-using-javascript/

Regards,
Rikin.
0
 
laurent_royConnect With a Mentor Commented:
Hello,

Yes you can.
You can find here how to do it (in french) : http://www.royhome.fr/post/2011/08/09/Modifier-une-r%C3%A8gle-CSS-en-JavaScript

To sum up in english, you have to know in which style sheet you class is.
Supposing, you want to modify a rule in the first sheet :

var sheet1 = document.styleSheets[0];
console.info(sheet1);
var rules = sheet1.cssRules || sheet1.rules;

for (i=0;i<rules.length;i++) {
 if (rules[i].selectorText == ".menuBar2") {
   rules[i].style.backgroundColor = "#06F";
 }
}

Open in new window


If you use import rules, it's more complicated, because rules[0] will contain the first import rule. So in that case, to change styles in the first import, you need to add :

rules=rules[0].styleSheet.cssRules;

Open in new window


If you need more explanation, ask me.

best regards,

Laurent
0
 
Anuradha GoliConnect With a Mentor Systems Development / Support SpecialistCommented:
Yes you can ..
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
or

function setCSS(eleID) {

var currTabElem = document.getElementById(eleID);

currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");

or

document.getElementById("MyElement").className = " MyClass";
}
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
laurent_royConnect With a Mentor Commented:
It actually depends on what you want : modify the style of the elements that have a particular class, or modifying CSS rules definition of that class (what I wrote).
0
 
Albert Van HalenConnect With a Mentor Analyst developerCommented:
Modern browsers do have the querySelectorAll method.
Remember that the method returns a nodelist so you have to loop through it.
var allElements = document.querySelectorAll(".menuBar2");
for(var x = 0, len = allElements.length; x < len; x++) {
   allElements.item(x).style.backgroundColor = "#06F";
}

Open in new window

0
 
rhyno99Author Commented:
Wow, there seems to be a lot of ways to approach this. I may want to restructure what I am trying to do to make it work best . Right now this may be the most simple solution. The problem is I don't understand how this would fit with this. If MyElement is a class, then it can't "get it", right?

document.getElementById("MyElement").className = " MyClass";
}

document.getElementById("menuBar2").style.backgroundColor = "#06F";

Thank you everyone for the tips. I will need to continue to review these examples to see what will work best. Sorry, I am new at this and a bit slow to understanding the scripts.
0
 
akila111086Connect With a Mentor Commented:
hi

<div class="dynamicscc" id="divcss" onmouseover="setcss(this.id)" > Hello</div>

javascript function to set the css class to control
*************************************
function setcss(elementid){
document.getElementById(elementid).className="colorchange";
}

colorchange is name of the class (CSS)

code the css setting in separate file and include that file in ur code

.colorchange{

color:#0000FF;}
0
 
rhyno99Author Commented:
Thank you all for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.