ClientWidth и clientHeight возвращает 0

Почему clientWidth/Height возвращают 0 в IE, Chrome и Safari? но в 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);

});

любая идея? Спасибо.

Я пробовал с windows.load с помощью clientwidth, он отлично работает для Firefox, Chrome и Opera, но другие не

Ответ 1

Попробуйте изменить doctype.
http://forums.asp.net/post/1515655.aspx
Я не уверен, но я решил эту проблему.

Ответ 2

Если вы хотите получить размеры, включая поля и границы, попробуйте использовать функции JQuery outerWidth и outerHeight. Они должны позаботиться о различиях между кроссбраузерами. http://api.jquery.com/outerwidth/

Если вы хотите получить только размеры содержимого элемента (без полей, границ, прокладок), используйте width и height. http://api.jquery.com/width/

Ответ 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); 

});