2012-02-25 20 views
5

dlaczego this.style[property] uzyskać pusty ciąg? mojego kodu jest: alertdlaczego javascript this.style [property] zwraca pusty ciąg znaków?

<!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> 

ten kod ,,#ccc, ale chcę dostać 100px,100px,#ccc, co się ze mną dzieje? kto może mi pomóc?

aktualizacja

zmieniłem funkcję css, teraz może pracować również:

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

Cóż, elementy DOM nie mają atrybutów "stylu". Więc nie możesz uzyskać ich atrybutów "stylu". –

+0

'elem.style' uzyskuje dostęp do własności * stylu *, które elementy mają. – pimvdb

Odpowiedz

22

Właściwość .style służy do tworzenia stylów umieszczonych bezpośrednio na elemencie. Nie oblicza stylów z arkuszy stylów.

Zobacz getComputedStyle().

+0

: aktualizuję mój kod (funkcja css), teraz może działać dobrze – artwl

1

Te elementy nie mają wysokość lub szerokość CSS określony.

Pamiętaj, że próbujesz uzyskać "żądane" rozmiary, a nie rzeczywiste rozmiary. Wynik jest zatem poprawny.

Jeśli chcesz uzyskać efektywne rozmiary , użyj metod jQuery width() i height(). Patrz: http://api.jquery.com/width/

Powiązane problemy