开发者社区> 问答> 正文

怎么用原生js获取img高度

如题
怎么用原生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>

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

展开
收起
杨冬芳 2016-06-20 14:52:58 3613 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

    <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可能没加载完成,所以当然是取不到值的。

    2019-07-17 19:44:08
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载