Come posso accedere alle proprietà di stile su oggetti javascript che usano fogli di stile esterni?

Question

Ho un foglio di stile esterno con questo in esso:

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

Ho poi hanno questo:

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

Quando poi provo ad accedere alla larghezza del div:

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

Viene visualizzata una casella di avviso vuota. Come posso accedere alla proprietà width che è definita nel mio foglio di stile?

NOTA: il div visualizza la larghezza corretta.

Answer 1

È necessario utilizzare window.getComputedStyle per ottenere tale valore. Ti consiglio di non utilizzare offsetWidth o clientWidth se stai cercando il valore CSS perché restituiscono una larghezza che include padding e altri calcoli.

Utilizzando getComputedStyle, il codice sarebbe:

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

La documentazione di questo è dato al MDC: window.getComputedStyle

Answer 2

offsetWidth visualizza la larghezza effettiva del div:

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

Questo larghezza può essere diverso da quello che si è impostato nel CSS, però. Il modo jQuery sarebbe (io davvero non voglio parlare di loro tutto il tempo, ma è quello che tutte le librerie sono lì per):

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

Answer 3

Spero che questo è utile:

 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+';'); 
     } 
    } 
} 
} 

Viene preso da here.

Answer 4

Le risposte sono quasi sempre corrette, ma farà la testa quando si tenta di utilizzare in quanto dipendono dalla modalità di rendering del browser (ovvero modalità strict/quirks, browser del venditore, ecc.) - l'ultima risposta è la migliore ... usa jquery.