Alter CSS Class Attributes with JavaScript

Getting or changing CSS class property with Javascript using DOM style

As mentioned by Quynh Nguyen, you don't need the '.' in the className. However - document.getElementsByClassName('col1') will return an array of objects.

This will return an "undefined" value because an array doesn't have a class. You'll still need to loop through the array elements...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}

How to change a property of a CSS class dynamically using javascript (no JQuery)

I don't know what triggers your animation, but let's say it's a click on each of the .sbox elements.

As you can't change the CSS, you can instead use the script to add an inline style height using .style.height.

Here is a snippet:

var sboxes = document.querySelectorAll(".sbox");
sboxes.forEach(function(box, index){  box.onclick = function(){    box.style.height = "360px";    box.className = 'sboxopen';  }})

.sbox {  height: 0px;  transition: height 1s ease-out;  overflow: hidden;  border: 8px solid gray; /* Added for better visibility */}
.sboxopen {  height: 130px;  transition: height 1s ease-out;  overflow: hidden;  border: 8px solid gray; /* Added for better visibility */}

<div class='sbox'>Box 1</div><br><div class='sbox'>Box 2</div><br><div class='sbox'>Box 3</div>

Alter CSS class attributes with javascript?

I think this is what you want:

<script>
var style;
function changeFoo(left, top) {
    if(typeof style == 'undefined') {
        var append = true;
        style = document.createElement('style');
    } else {
        while (style.hasChildNodes()) {
            style.removeChild(style.firstChild);
        }
    }
    var head = document.getElementsByTagName('head')[0];
    var rules = document.createTextNode(
        '.Foo { left: ' + left + 'px; top: ' + top + 'px; }'
    );

    style.type = 'text/css';
    if(style.styleSheet) {
        style.styleSheet.cssText = rules.nodeValue;
    } else {
        style.appendChild(rules);
    }
    if(append === true) head.appendChild(style);
}
</script>

This code was modified from an answer provided in this question which is very similar to what you asked. Whenever you need to change the position of all .Foo elements, you can just call changeFoo(newLeftValue, newTopValue); - the first time around it will create the <style> element and add it to the <head> of the document. Subsequent calls will just empty the <style> element that was already added and add the new rule.

Change CSS of class in Javascript?

You can do that — actually change style rules related to a class — using the styleSheets array (MDN link), but frankly you're probably better off (as changelog said) having a separate style that defines the display: none and then removing that style from elements when you want them no longer hidden.

Modify CSS classes using Javascript

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.