jquery - 使用jquery获取元素的宽度

Question

您好朋友，我想获得包含在<li>以下内容中的图像宽度是我的代码

脚本

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 中打开它时，我的代码给出了准确的值，但是当我将它检入 chrome 时给出了 0（零）......我不知道为什么......请帮帮我

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

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

这会将图像的宽度保存在数组中。

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

score 0 · Accepted Answer

试试这个代码。

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

jquery - 使用jquery获取元素的宽度

3 回答 3

Related

Reference