搜索
javascript - float元素获取宽度
巴扎黑
巴扎黑 2017-04-10 15:47:49
[JavaScript讨论组]
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/common-js/jquery-1.9.1.js"></script>
    <style>
        .scroll-list li {float:left;}
    </style>
    <script>
        $(document).ready(function(){
           var imgs = $("#scroll_list").find("img");
            imgs.each(function(){
                console.log($(this).width());
            })
        });
    </script>
</head>
<body>
<p class="scroll-warp" id="scrollWrap">
    <p class="scroll-box" id="scroll_box">

        <p class="scroll-list left" id="scroll_list">
            <ul>
                <li><img src="/images/a.jpg" alt="1"></li>
                <li><img src="/images/b.jpg" alt="2"></li>
                <li><img src="/images/c.jpg" alt="3"></li>
                <li><img src="/images/e.jpg" alt="4"></li>
                <li><img src="/images/f.jpg" alt="5"></li>
            </ul>
        </p>

    </p>
</p>

</body>
</html>

在页面初次加载时能正确获得图片的宽度,在chrome中使用右键的[重新加载],在firefox和chrome中使用vim插件的强制刷新都会出现width值错误的现象.请问原因是什么.

巴扎黑
巴扎黑

全部回复(1)
黄舟

看样子 你是想写个图片轮播 获取图片的高度。

  1. $(document).ready 是指普通dom元素都可用才执行 但是img不是,img的宽高还未加载出来。

  2. 解决办法一 var img = new Image() img = '你图片的路径' img.onload = function(){
    在这个回调里 图片宽高都已经加载好可用了}

  3. 解决办法二 你提前已经定了轮播图片的高度

  4. 如果你想做可自适应的 请在每次滑动的时候重新获取滑动距离

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号