Question

If I want to read the opacity value in to javacript I can just use

element.style.opacity 

but if I want the fontSize I have to use the function below.

function findFontSize( element_id )
{
    var element = document.getElementById( element_id );  
    // var theCSSprop = element.style.fontSize; // Does not work  
    // var theCSSprop = element.getPropertyValue("font-size"); // Does not work
    var theCSSprop = window.getComputedStyle( element, null ).getPropertyValue("font-size");  // This works
    alert( theCSSprop ); 
}

Related

http://jsfiddle.net/tUc5v/

Why is this?

Answer 1

There is a different syntax for explicitly defined css styles and inherited styles. I’m guessing (though your jsfiddle doesn’t match the question) that opacity is being explicitly set, but fontSize is inherited.

UPDATE:
Found this old comment, thought I’d give a little more…

If an element does not have a style explicitly defined in a stylesheet or inline then it falls back to the computed style which is not accessible via the element.style.property way.

Another difference is, explicit styles on the style object are camelCase, but computed styles are hyphen-case.

Another thing to note is that properties accessed via the style object are 3x-4x faster than window.getComputedStyle (or document.defaultView.getComputedStyle).

Here’s a basic function that can do this for any style (it doesn’t check for incorrect input, etc..)

/**
 * 
 * @param el Element
 * @param CSS property in hyphen case 
 * @param pseudo pseudo selector (optional, e.g. '::before')
 */
function getStyleValue(el, property, pseudo) {
    // convert hyphen-case to camelCase
    const elStyle = el.style[property.replace(/(\-[a-z])/g, $1 =>  $1.toUpperCase().replace('-',''))];
    return ((elStyle !== '' && !pseudo) 
        ? elStyle
        : window.getComputedStyle(el, pseudo).getPropertyValue(property));
}