javascript - clientWidth 和 clientHeight 返回 0

Question

为什么在 IE、Chrome 和 Safari 上 clientWidth/Height 返回 0？但在 Firefox 和 Opera 上运行良好。我使用了这段代码：

$(document).ready(function () {

    var imgs = document.getElementsByTagName('img');
    var imgLength = imgs.length;

    for (var i = 0; i <= imgLength - 1; i++) {

        var imgWidth = imgs[i].clientWidth;
        var imgHeight = imgs[i].clientHeight;

        $('img').eq(i).attr({
            width: imgWidth,
            height: imgHeight
        });

        console.log(imgWidth);
    }

    console.log(imgLength);

});

任何想法？谢谢。

我尝试使用带有 clientwidth 的 window.load 它在 Firefox、Chrome 和 Opera 上运行良好，但其他人则不行

Answer 1

尝试更改文档类型。
http://forums.asp.net/post/1515655.aspx
我不确定，但我解决了这个问题。

Answer 2

如果您想获得包括边距和边框在内的尺寸，请尝试使用 JQuery 函数outerWidth和outerHeight. 他们应该注意跨浏览器的差异。http://api.jquery.com/outerwidth/

如果您只想获取元素内容的尺寸（没有边距、边框、填充），请使用widthand height。http://api.jquery.com/width/

Answer 3

我认为如果您使用 JQuery 来获取高度和宽度会更好，因为它在所有浏览器中都可以正常工作，所以您的代码将是这样的：-

$(document).ready(function() {


     var imgs = $('img');
     var imgLength = imgs.length;

     for(var i=0; i<= imgLength-1;i++){

         var imgWidth = imgs[i].width();
         var imgHeight = imgs[i].height();

         $('img').eq(i).attr({width:imgWidth, height: imgHeight});

         console.log(imgWidth);
     }

     console.log(imgLength); 

});