?
Solved

access a css class with javascript?

Posted on 2012-04-09
8
Medium Priority
?
419 Views
Last Modified: 2012-04-14
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
0
Comment
Question by:rhyno99
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 19

Accepted Solution

by:
Rikin Shah earned 252 total points
ID: 37826408
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
 
LVL 2

Assisted Solution

by:laurent_roy
laurent_roy earned 498 total points
ID: 37827231
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
 
LVL 12

Assisted Solution

by:Anuradha Goli
Anuradha Goli earned 249 total points
ID: 37827632
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 2

Assisted Solution

by:laurent_roy
laurent_roy earned 498 total points
ID: 37828785
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
 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 252 total points
ID: 37829988
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
 

Author Comment

by:rhyno99
ID: 37835942
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
 

Assisted Solution

by:akila111086
akila111086 earned 249 total points
ID: 37836437
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
 

Author Closing Comment

by:rhyno99
ID: 37846382
Thank you all for your help.
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question