2012-02-25 14 views
5

¿por qué this.style[property] obtener una cadena vacía? mi código es: alerta¿por qué javascript this.style [propiedad] devuelve una cadena vacía?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo</title> 
    <style type="text/css"> 
     #test{ 
      height:100px; 
     } 
     .tclass{ 
      width:100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     function $(ID){ 
      var element=document.getElementById(ID||'nodId'); 
      if(element){ 
       element.css=css; 
      } 
      return element; 
     } 

     function css(prop,value){ 
      if(value==null){ 
       return this.style[prop]; 
      } 
      if(prop){ 
       this.style[prop]=value; 
      } 
      return true; 
     } 

     window.onload=function(){ 
      var element=$("test"); 
      alert(element.css("height")+","+element.css("width")+","+element.css("background")); 

      //alert ,,#ccc 
     }; 
    </script> 
</head> 
<body> 
    <div id="test" style="background:#CCC;" class="tclass">Test</div> 
</body> 
</html> 

este código ,,#ccc, pero quiero conseguir 100px,100px,#ccc, lo que está mal conmigo? ¿Quién puede ayudarme?

actualización

he cambiado la función css, ahora se puede trabajar bien:

function css(prop,value){ 
     if(value==null){ 
      var b = (window.navigator.userAgent).toLowerCase(); 
      var s; 
      if(/msie|opera/.test(b)){ 
       s = this.currentStyle 
      }else if(/gecko/.test(b)){ 
       s = document.defaultView.getComputedStyle(this,null); 
      } 
      if(s[prop]!=undefined){ 
       return s[prop]; 
      } 
      return this.style[prop]; 
     } 
     if(prop){ 
      this.style[prop]=value; 
     } 
     return true; 
    } 
+0

Bueno, los elementos DOM no tienen atributos 'style'. Entonces no puedes obtener sus atributos de 'estilo'. –

+0

'elem.style' está accediendo al estilo * propiedad * que tienen los elementos. – pimvdb

Respuesta

22

La propiedad .style es para obtener estilos que se colocaron directamente en el elemento. No calcula estilos de tus hojas de estilo.

Ver getComputedStyle().

+0

: actualizo mi código (la función css), ahora puede funcionar bien – artwl

1

Los elementos no tienen una altura o anchura CSS especificado.

Tenga en cuenta que está tratando de obtener los tamaños "solicitados", no los tamaños reales. El resultado por lo tanto es correcto.

Si desea obtener los eficaces tamaños, utilice los métodos jQuery width() y height(). Consulte http://api.jquery.com/width/

Cuestiones relacionadas