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 回答
1

这是有效的:: 使您的图像显示：块，否则它将返回 0。

<!doctype html>
      <html>
      <head>
       <meta charset="utf-8">
      <title>Title</title>
      <style>
      #slideshow img {
                display : block;
    border:1px solid;
                width : 300px;
                height : 200px;
            }
      </style>
      </head>
      <body> 
      <div id="slideshow">

          <img src="slides/1.gif">
      <img src="slides/2.gif">
      <img src="slides/3.gif">

      </div>

        <script>
       window.onload = function () {
                                alert(document.getElementsByTagName('img')[0].clientWidth);
                            }
      </script>
      </body>
      </html>
于 2013-08-13T15:15:03.653 回答
1

JSFiddle：http: //jsfiddle.net/enzoferber/HM47Q/2/

var firstImg = document.getElementById("slideshow").getElementsByTagName ("img") [0];

alert ( window.getComputedStyle(firstImg).width );

您必须使用getComputedStyle才能做到这一点。

于 2013-08-13T13:57:18.390 回答