2

最新の 2 つのブラウザで確認しました。

JS コード:

      window.onload = function () {
                                alert
      (document.getElementById("slideshow").getElementsByTagName ("img") [0].style.width);
                            }

HTML コード:

      <!doctype html>
      <html>
      <head>
       <meta charset="utf-8">
      <title>Title</title>
      <script src="script.js" type="text/javascript"></script>
      <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <body> 
      <div id="slideshow">
      <img src="slides/1.gif">
      <img src="slides/2.gif">
      <img src="slides/3.gif">
      </div>
      </body>
      </html>

CSS コード:

      #slideshow img {
                display : none;
                width : 300px;
                height : 200px;
            }

しかし、アラートから空の文字列があります。エラー (Firebug ではエラーなし) が発生するのはなぜですか? css ファイルから追加されたスタイルをまったく読み取ることはできますか? http://jsfiddle.net/HM47Q/

4

5 に答える 5

3

getComputedStyle代わりに使用してください。

window.onload = function () {
    var elem = document.getElementById("slideshow").getElementsByTagName("img")[0];
    console.log(window.getComputedStyle(elem, null).getPropertyValue("width"));
}

jsFiddle の例

于 2013-08-13T13:51:23.080 に答える
1

インライン スタイルを取得しているためです。

これを使って：

   var element = document.getElementbyId("#slideshow").getElementsByTagName('img')[0];
   var style = window.getComputedStyle(element),
   var width = style.getPropertyValue('width');
于 2013-08-13T13:50:58.233 に答える
1

空の画像には幅/高さがありません

于 2013-08-13T13:54:21.093 に答える