jQuery获取元素尺寸
程序员文章站
2022-06-15 13:56:43
...
1 先设置一些简单的样式
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
background-color: #00FF00;
padding:20px;
margin:10px;
border:5px solid black;
}
</style>
**2 在body里写内容**
<body>
<div>
<p>ceshi</p>
</div>
</body>
**3 引入jQ**
<script type="text/javascript" src='./jquery.min.js'></script>
<script type="text/javascript">
//width,height
// padding
// border
// margin
4
// 三套方法，四种使用方式
**// 1 width() 和 height()--获取元素的 内容 区域的尺寸**
console.log($('div').width())//200
console.log($('div').height())
**// 2 innerWidth() 和 innerHeight()--获取元素的 内容+padding区域的尺寸**
console.log($('div').innerWidth())//240
console.log($('div').innerHeight())
**// 3 outerWidth() 和 outerHeight()--获取元素的 内容 +padding+border 区域的尺寸**
console.log($('div').outerWidth())//250
console.log($('div').outerHeight())
**// 4 outerWidth(true) 和 outerHeight(true)--获取元素的 内容 +padding+ border+margin区域的尺寸。**
console.log($('div').outerWidth(true))//270
console.log($('div').outerHeight(true))
</script>