Question

150

JavaScript get Styles

rated 0 times [ 157] [ 7] / answers: 1 / hits: 16539 / 14 Years ago, sat, november 13, 2010, 12:00:00

Is it possible to get ALL of the styles for an object using JavaScript? Something like:





main.css

-------

#myLayer {

  position: absolute;

  width: 200px;

  height: 100px;

  color: #0000ff;

}



main.js

-------

var ob = document.getElementById(myLayer);

var pos = ob.(getPosition);

// Pos should equal absolute but

// ob.style.position would equal null

// any way to get absolute?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryankiah

Add To Favorites

Follow

Total Points: 183

Total Questions: 99

Total Answers: 112

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

answered 14 Years ago gerardob · Accepted Answer

You are talking about what is known as Computed Style, check out these article on how to get it:

Get Styles on QuirksMode

Get Computed Style

Get the rendered style of an element

From the last article, here is a function:

function getStyle(oElm, strCssRule){

    var strValue = ;

    if(document.defaultView && document.defaultView.getComputedStyle){

        strValue = document.defaultView.getComputedStyle(oElm, ).getPropertyValue(strCssRule);

    }

    else if(oElm.currentStyle){

        strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){

            return p1.toUpperCase();

        });

        strValue = oElm.currentStyle[strCssRule];

    }

    return strValue;

}

How to use it:

CSS:

/* Element CSS*/

div#container{

    font: 2em/2.25em Verdana, Geneva, Arial, Helvetica, sans-serif;

}

JS:

var elementFontSize = getStyle(document.getElementById(container), font-size);