JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/16995773/the-style-object-and-html-attibute

by lalatino

HTML

<div id="example" class="example" style="color:red;"> example text </div>

CSS

div.example {
    color:blue /*!important*/;
    background-color:#ccc;
}

JavaScript

var elem;

window.addEventListener('load', function () {

    elem = document.getElementById('example'); // get reference to DOM element
    
    alert(elem.style.color); // 'red', this element's color property (DOM) is the same as declared in element's inline style attribute (HTML)
    
    alert(window.getComputedStyle(elem,null).getPropertyValue('color')); // shows rgb(0,0,255) ~ blue, the real element's property was forced to blue in class declaration.
    
    alert(elem.style.backgroundColor); // '' empty string because background-color style was not set in HTML for div's inline style attribute
    
    elem.style.color = 'green'; // this can't override the blue !important style

}, false);