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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rikin ShahMicrosoft 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
laurent_royCommented:
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 GoliSystems 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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

laurent_royCommented:
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 HalenAnalyst 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
akila111086Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.