modifying Elements

Playing with dom styling in pure JS

by Susan Delgado

HTML

<div style="font-size:xx-large" id="foo">This is some content</div>

<div style="font-size:xx-large" id="bar">This is some content</div>

CSS

.css-class{
    color:blue;
    border: 1px solid black;
    background-color: #ff0;
    padding: 2px;
}
.css-class2{
    font-weight:bold;
}

JavaScript

(function(global){
  "use strict";
  //var alert;  
  var fooEle = document.getElementById("foo");
  //var style = fooEle.style;
  fooEle.className = " css-class css-class2 ";
  
  var getStyle = function(el, cssProperty){
    if(typeof getComputedStyle !== "undefined"){
      return window.getComputedStyle(el, null).getPropertyValue(cssProperty);
    } else {
        //ie older versions
      return el.currentStyle[cssProperty];
    }
  };
      var color = getStyle(fooEle, "color");

  alert(color);
    
}());