4.16

最新推荐文章于 2019-08-08 11:08:32 发布

ChuiBABA

最新推荐文章于 2019-08-08 11:08:32 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/ChuiBABA/article/details/89423424

版权

px em （css盒子模型）
在这里插入图片描述
width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）

height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）

通过jquery获取元素的宽高在这里插入图片描述

代码

<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸</button>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            var txt=" "
            txt +="div的宽度是："+$("#div1").width()+"px"+"<br>"
            txt +="div的长度是："+$("#div1").height()+"px"+"<br>"
            txt +="div的宽度，包括内边距"+$("#div1").innerWidth()+"px"+"<br>"
            txt +="div的长度，包括内边距"+$("#div1").innerHeight()+"px"+"<br>"
            txt +="div的宽度，包括内边距和边框"+$("#div1").outerWidth()+"px"+"<br>"
            txt +="div的长度，包括内边距和边框"+$("#div1").outerHeight()+"px"+"<br>"
            txt +="div的宽度，包括内边距和外边距"+$("#div1").outerWidth(true)+"px"+"<br>"
            txt +="div的长度，包括内边距和外边距"+$("#div1").outerHeight(true)+"px"+"<br>"
            $("#div1").html(txt)
        })
    })
    </script>