Reading Non-Inline CSS Style Info from JavaScript

Reading non-inline CSS style info from Javascript

The style property of a DOM element refers only to the element's inline styles.

Depending on the browser, you can get the actual style of an element using DOM CSS

In firefox, for example:

var body = document.getElementsByTagName("body")[0];
var bg = window.getComputedStyle(body, null).backgroundColor;

Or in IE:

var body = document.getElementsByTagName("body")[0];
var bg = body.currentStyle.backgroundColor;

Retrieve CSS value, not inline-style value

Yes, of course! Just get rid of the style attribute, use getComputedStyle(), and add the style attribute back:

//Get the body's style attribute:

var bodyStyle = document.body.getAttribute("style");

//Now, get rid of it:

document.body.removeAttribute("style");

//Now use getComputedStyle() to compute the font size of the body and output it to the screen:

document.write( getComputedStyle(document.body).fontSize );

//Now add the style attribute back:

document.body.setAttribute("style", bodyStyle);

body { font-size: 15px; }

<body style="font-size: 20px;">

</body>

Using javascript to edit class (not inline styles on elements)

Better place a identity (attribute, id, name) on the style element, so you can target the particular style (DOM) element (will be helpfull when there are many), and then replacethe inner html
eg:

<style id="targetStyle">
  .something{
    height : 100px;
  }
</style>

and then in your javascript

var styleDom = document.getElementById('targetStyle');
styleDom.innerHTML = styleDom.innerHTML.replace(/height.*px;/,'height: 85px;');

Build the Regex properly according to your use case, its just a rough example to describe on the part how you can achive this, instead how to replace a string in depth.

JavaScript: different behavior if CSS is inline vs inside head

As you thought, and as others have said, your javascript doesn't recognize the background to white. This is because element.style is used to get or to set the inline css. You can read more here.

What is usually done instead is to set a class to your elements:

<td class="white" onclick="myScript(this)">2</td>

In your css you would define what your classes do, and you will then use Javascript just to toggle between the classes

How to read inline styling of an element?

Updated to work with IE

You could try something like this

function hasInlineStyle(obj, style) {
    var attrs = obj.getAttribute('style');
    if(attrs === null) return false;
    if(typeof attrs == 'object') attrs = attrs.cssText;
    var styles = attrs.split(';');
    for(var x = 0; x < styles.length; x++) {
        var attr = styles[x].split(':')[0].replace(/^\s+|\s+$/g,"").toLowerCase();
        if(attr == style) {
            return true;
        }
    }
    return false;
}

So if you have an element like this:

<span id='foo' style='color: #000; line-height:20px;'></span>

That also has a stylesheet like this:

#foo { background-color: #fff; }

The function would return...

var foo = document.getElementById('foo');
alert(hasInlineStyle(foo,'color')); // true
alert(hasInlineStyle(foo,'background-color')); // false

CSS style to inline style via JavaScript

You can do something like this:

function applyStyle(el) {
    s = getComputedStyle(el);

    for (let key in s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
    }
}

let x = document.getElementById('my-id');
applyStyle(x);

Where x is the element you want to apply the style to.

Basically this function gets the computed style of the element and then copies each property (like padding, background, color, etc.) to the inline style of the element.

I don't know why you need to do this, but it's a really dirty approach in my opinion. I would personally advise against it.

Reading Non-Inline CSS Style Info from JavaScript