Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 424
  • Last Modified:

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
0
rhyno99
Asked:
rhyno99
6 Solutions
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now