Question

朋友们，我想获得包含在<li>中的图片宽度以下是我的代码

SCRIPT

var imageWidth = $('.slider_cont ul li').children('img').width();
console.log(imageWidth);

HTML

<div class="slider_cont">
        <ul>
            <li><img src="images/1.jpg" alt=" " /></li>
            <li><img src="images/2.jpg" alt=" " /></li>
            <li><img src="images/3.jpg" alt=" " /></li>
            <li><img src="images/4.jpg" alt=" " /></li>
        </ul>
    </div>

当我在firefox中打开它时，我的代码给出了确切的值，但当我检查它时，它给出了0（ZERO）....我不知道为什么...请帮助我们

Answer 1

列表中有4张图片。您的代码只记录第一个。

这样可以保存数组中图像的宽度。

var imageWidth = new Array();
$('.slider_cont ul li').children('img').each(function() {
    imageWidth.push($(this).width());
});
console.log(imageWidth);

Answer 2

Chrome以与FF相同的方式渲染图像。要正确获取图像宽度，您需要等待浏览器完成加载图像标记。一种方法是在图像标记上设置onload事件，如下所示：

<script>
    function showWidth(){
        var imageWidth = $('.slider_cont ul li').children('img').width();
        console.log(imageWidth);
    }

</script>
<body>
    <div class="slider_cont">
        <ul>
            <li><img src="3Qp6h.png" alt=" " onload="showWidth()"/></li>
        </ul>
    </div>
</body>

Answer 3

试试这段代码。

var image = $('.slider_cont ul li').children('img');
console.log(image.clientWidth);

如果元素使用jquery获取宽度

3 个答案: