jquery ---- 获取元素的大小
程序员文章站
2022-05-24 11:08:31
...
width([纯数字/带单位的字符串]) 返回宽度/设置宽度 (返回值是数字)
代码：
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
<body>
<div class="box"></div>
<script>
//获取
console.log( $(".box").width()) //100
//设置宽
//console.log( $(".box").width(200)) //200
//设置宽
console.log( $(".box").width("400px")) //400
//console.log( $(".box").css("width")) //返回带单位的字符串 100px
</script>
</body>
width(function(index,width){}) 采用匿名函数
<body>
<div class="box">1</div>
<div class="box">2</div>
<script>
$(".box").width(function(index,width){
if(index % 2 == 0){
return width + 50;
}else{
return width -50;
}
})
</script>
</body
innerWidth() 宽度 + 包含内边距 (content + padding)
innerHeight() 高度 + 包含内边距 (content + padding)
代码：
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
padding: 15px;
margin: 20px;
border: 10px solid #005;
}
</style>
<body>
<div class="box">1</div>
<script>
console.log($(".box").innerWidth()) // 130
console.log($(".box").innerHeight()) // 130
</script>
</body>
效果：
outerWidth() 宽度 + 包含内边距 + 边框 (content + padding + border)
outerHeight() 高度 + 包含内边距 + 边框 (content + padding + border)
console.log($(".box").outerWidth()) // 150
console.log($(".box").outerHeight()) // 150
outerWidth(true) 宽度 + 包含内边距 + 边框 + 外边距 (content + padding + border + margin)
outerHeight(true) 高度 + 包含内边距 + 边框 + 外边距 (content + padding + border + margin)
console.log($(".box").outerWidth(true)) // 190
console.log($(".box").outerHeight(true)) // 190