2012-02-25 18 views
5

なぜthis.style[property]空の文字列を取得しますか?私のコードは次のとおりです。javascript this.style [property]が空の文字列を返すのはなぜですか?

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

このコードの警告,,#cccが、私は100px,100px,#cccを取得したい、私と一緒に間違って何ですか?誰が私を助けられるか?

更新

私は今、それがうまく機能することができ、CSSの機能を変更:

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

DOM要素には 'style'属性はありません。だから、あなたは 'style'属性を得ることができません。 –

+0

'elem.style'は要素が持つスタイル*プロパティ*にアクセスしています。 – pimvdb

答えて

22

.styleプロパティは、要素に直接配置されたスタイルを取得するためのプロパティです。スタイルシートのスタイルは計算されません。

getComputedStyle()を参照してください。

+0

:私のコード(CSS関数)を更新しました。今はうまくいきます – artwl

1

要素が指定されたCSSの高さや幅を持っていません。

実際のサイズではなく、「要求された」サイズを取得しようとしていることに注意してください。したがって、出力は正しいです。

の有効サイズをにしたい場合は、jQuery width()height()メソッドを使用してください。 http://api.jquery.com/width/

関連する問題