naturalWidth 与 naturalHeight

在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性(图片原始大小)，分别为 
naturalWidth 和naturalHeight属性，例子如下： 

注意问题： 
- 图片没有加载的时候 值为0，0 
- 与img 设置的width 和height 无关，是图片的原始大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../base/jquery.js"></script>
</head>
<body>
<img width="200" height="125"
     src="//www.baidu.com/img/baidu.gif"
     id="abc">

<script>
    $(function () {
        $("#abc").on("load", function () {
         //jquery写法
            var imgW = $("#abc")[0].naturalWidth;
            var imgH = $("#abc")[0].naturalHeight;

        //javascript写法
            var imgW = myimage.naturalWidth; 
            var imgH = myimage.naturalHeight; 


            alert("原始大小:宽：" + imgW + "高：" + imgH);

  
            var imgWidth = $("#abc")[0].width;
            var imgHeight = $("#abc")[0].height;

            alert("显示: 宽：" + imgWidth + "高：" + imgHeight);


        })
    })
</script>
</body>
</html>

 

posted @ 2018-01-19 20:22  绿叶葱花  阅读(219)  评论(0)  编辑  收藏  举报