怎么用原生js获取img高度 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

怎么用原生js获取img高度

杨冬芳 2016-06-20 14:52:58 1837

如题
怎么用原生js获取img高度,img没有设置height属性

wait.png这种方式offsetHeight可以获取高度

如果是这么写wait.png offsetHeight clientHeight都不行

最新发现,就chrome不行。Firefox,IE的 offsetHeight,clientHeight,height都可以。chrome版本为47.0.2526.73 m,但是用jq img.height()却可以喔。

以下方法是不行的(就chrome不行,IE Firefox都可以)

    <img id="img2" src="img/big-icon.png">
    <script type="text/javascript">
        var img = document.getElementById('img2');
        console.log(img.height);
        console.log(img.offsetHeight);
    </script>

以下方法是是可以的,就加了onload

    <img id="img2" src="img/big-icon.png">
    <script type="text/javascript">
        window.onload = function() {
            var img = document.getElementById('img2');
            console.log(img.height);
            console.log(img.offsetHeight);
        }
    </script>

我会之后再在别的地方试试看是否是浏览器坏了

Web App开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:44:08

    也不知道你的为啥不行,不行就贴代码。

    <img id="img" src="http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud10.png">
    <script type="text/javascript">
    window.onload=function(){
        var img = document.getElementById('img');
        console.log(img.height);
        console.log(img.offsetHeight);
    }
    </script>    

    图片设置高度的话会取到设置的,没设置的话是原始高度300px

    我猜你是js写在图片前边了吧?

    ------补充你评论的问题----

    <img id="img2" src="/usr/local/var/www/test/mac-noise-reduction.png">
    <script type="text/javascript">
    window.onload=function(){
        var img = document.getElementById('img2');
        console.log(img.height);
        console.log(img.offsetHeight);
    }
    </script>    

    这样,也是可以正常获取到高度的,图片信息见下图:
    screenshot
    ---补充--
    回复评论失败,好像是bug。
    之前疏忽没加onload,不加的话表示页面加载到js就执行js,但此时页面的一些外部元素比如图片,CSS可能没加载完成,所以当然是取不到值的。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题