¿Cómo puedo acceder a las propiedades de estilo en objetos JavaScript que usan hojas de estilo externas?

Question

tengo una hoja de estilo externa con esto en él:

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

que luego tienen la siguiente:

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

Cuando continuación intento acceder a la anchura de la div:

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

Aparece un cuadro de alerta en blanco. ¿Cómo puedo acceder a la propiedad de ancho que está definida en mi hoja de estilos?

NOTA: El div se muestra con el ancho correcto.

Answer 1

Debe usar window.getComputedStyle para obtener ese valor. Recomendaría no usar offsetWidth o clientWidth si está buscando el valor de CSS, ya que estos devuelven un ancho que incluye relleno y otros cálculos.

Usando getComputedStyle, el código sería:

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

La documentación de esto se da en el MDC: window.getComputedStyle

Answer 2

offsetWidth muestra la anchura real de su div:

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

Esta anchura puede ser diferente a lo que ha establecido en el CSS, sin embargo. La forma jQuery sería (que realmente no quieren a ellos hablar todo el tiempo, pero eso es lo que todas las bibliotecas están allí para):

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

Answer 3

espero que esto sea útil:

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

Se toma desde here.

Answer 4

Las respuestas son en su mayoría correcto, pero harán su cabeza en cuando intenta utilizar ellos ya que dependen del modo de representación del navegador (también conocido como modo estricto/peculiar, vendedor de navegador, etc.) - la última respuesta es la mejor ... use jquery.