Modify CSS classes using Javascript

Question

I was wondering if there is an easy way to change the CSS classes in JavaScript. I have gone through all other similar questions here and I couldn't find an straight-forward and simple solution.

what I'm trying to do is to set the width and height of a <div> to match an image that I have on my site (upon loading). I already know the picture dimensions and I can set my CSS to that - but I want my script to figure this out on its own.

After hours of r&d (I'm a beginner), this is what I came up with:

var myImg = new Image();  myImg.src = "img/default.jpg";  myImg.onload = function(){      var imgWidth = this.width;     var imgHeight = this.height;      document.getElementById("myBg").setAttribute('style', "height :"+ imgHeight + "px");     document.getElementById("myBg").setAttribute('style', "width :"+ imgWidth + "px");  }; 

However, this only sets the width of the element with id "myBg". If I reverse the order of the height and width, then it only sets the height to the image's height. It seems like first it sets the height of the element to the image height but right after it moves to the next statement to set the width, the height value goes back to what it what defined originally in css.

I did further research online and seems like changing the css (inserting new attributes, removing, etc.) using JavaScript is not an easy task. It is done through

document.styleSheets[i].cssRules[i]  or  document.styleSheets[i].addRule 

type of commands, but all the tutorials online and here on stackoverflow were confusing and complicated.

I was wondering if anyone familiar with document.styleSheets can explain this to me simply?

Imagine I have this class in my separate css file:

.container {     height: 600px;     width: 500px; } 

I want the height and width to change to the dimension of the picture upon loading. How do I do this?

• I don't want to define a new "style" element in my html file, I want to change the css file.
• I'm not supposed to know the image dimension before it loads to the page.
• no jquery please, I want to do this using only standard JavaScript.

Thank you.

Answer 1

The reason only one or the other works is because in your second line of code, you destroy the whole style attribute, and recreate it. Note that setAttribute() overwrites the whole attribute.

A better solution would be to use the element.style property, not the attribute;

var bg = document.getElementById("myBg"); bg.style.width = imgWidth + "px"; bg.style.height = imgHeight + "px"; 

You can grab all elements with class container and apply it to each of them like this:

var elements = document.querySelectorAll('.container'); for(var i=0; i<elements.length; i++){     elements[i].style.width = imgWidth + "px";     elements[i].style.height = imgHeight + "px"; } 

Note querySelectorAll isn't supported by IE7 or lower, if you need those then there are shims for getElementsByClassName() here on SO.

Answer 2

If your rules start incrementing you could extract your css to a new class and switch classes:

CSS:

.container-1{   /* A set of rules */ } .container-2{   /* A set of rules */ } 

JavaScript:

element.className = element.className.replace(/container-1/, 'container-2')