CODEWITHSUNDEEP
javascripthtmlcss
Jesse Gibbs
Jesse Gibbs

Reputation: 457

How can I access style properties on javascript objects which are using external style sheets?

I have an external style sheet with this in it:

.box {
padding-left:30px;
background-color: #BBFF88;
border-width: 0;
overflow: hidden;
width: 400px;
height: 150px;
}

I then have this:

<div id="0" class="box" style="position: absolute; top: 20px; left: 20px;">

When I then try to access the width of the div:

alert(document.getElementById("0").style.width);

A blank alert box comes up. How can I access the width property which is defined in my style sheet?

NOTE: The div displays with the correct width.

Upvotes: 5

Views: 9653

Answers (4)

Daff
Daff

Reputation: 44215

offsetWidth displays the actual width of your div:

alert(document.getElementById("0").offsetWidth);

This width can be different to what you have set in your css, though. The jQuery way would be (I really don't want to mention them all the time, but that's what all the libraries are there for):

$("#0").width(); // should return 400
$("#0").offsetWidth(); // should return 400 as well
$("#0").css("width"); // returns the string 400px

Upvotes: 2

Mathew
Mathew

Reputation: 144

The answers are mostly correct, but will do your head in when you try to use them as they depend on the rendering mode of the browser (aka strict/quirks mode, browser vender, etc) - the last answer is the best... use jquery.

Upvotes: 0

aditya
aditya

Reputation: 1998

You should use window.getComputedStyle to get that value. I would recommend against using offsetWidth or clientWidth if you're looking for the CSS value because those return a width which includes padding and other calculations.

Using getComputedStyle, your code would be:

var e = document.getElementById('0');
var w = document.defaultView.getComputedStyle(e,null).getPropertyValue("width");

The documentation for this is given at MDC : window.getComputedStyle

Upvotes: 11

the_drow
the_drow

Reputation: 19181

I hope this is helpful:

        function changecss(theClass,element,value) {
//Last Updated on June 23, 2009
//documentation for this script at
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
 var cssRules;

 var added = false;
 for (var S = 0; S < document.styleSheets.length; S++){

if (document.styleSheets[S]['rules']) {
  cssRules = 'rules';
 } else if (document.styleSheets[S]['cssRules']) {
  cssRules = 'cssRules';
 } else {
  //no rules found... browser unknown
 }

  for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
   if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
    if(document.styleSheets[S][cssRules][R].style[element]){
    document.styleSheets[S][cssRules][R].style[element] = value;
    added=true;
    break;
    }
   }
  }
  if(!added){
  if(document.styleSheets[S].insertRule){
          document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
        } else if (document.styleSheets[S].addRule) {
            document.styleSheets[S].addRule(theClass,element+': '+value+';');
        }
  }
 }
}

It is taken from here.

Upvotes: 0

Related Questions