Solved

access a css class with javascript?

Posted on 2012-04-09
8
417 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 84 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 166 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 83 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 2

Assisted Solution

by:laurent_roy
laurent_roy earned 166 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 84 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 83 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

732 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