jq 获取元素的尺寸
方法 | 作用 |
---|
width() | 获取元素的内容宽度 |
height() | 获取元素的内容高度 |
innerWidth() | 获取元素(内容+padding)宽度 |
innerHeight() | 获取元素(内容+padding)高度 |
outerWidth() | 获取元素(内容+padding+border)宽度 |
outerHeight() | 获取元素(内容+padding+border)高度 |
outerWidth(true) | 获取元素(内容+padding+border+margin)宽度 |
outerHeight(true) | 获取元素(内容+padding+border+margin)高度 |
写法 | 作用 |
---|
$(window).width() | 获取浏览器可视区宽度 |
$(window).height() | 获取浏览器可视区高度 |
$(document).width() | 获取页面宽度 |
$(document).height() | 获取页面高度 |
$('body').width() | 获取页面宽度,body默认有8px的margin |
$('body').height() | 获取页面高度,body默认有8px的margin |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: Red;
padding: 10px;
border: 5px black solid;
margin: 3px;
display: none;
}
</style>
<script src="./jquery-3.4.1.js"></script>
</head>
<body style="height: 3000px;">
<div></div>
<script>
console.log($('div').width());
console.log($('div').height());
console.log($('div').innerWidth());
console.log($('div').innerHeight());
console.log($('div').outerWidth());
console.log($('div').outerHeight());
console.log($('div').outerWidth(true));
console.log($('div').outerHeight(true));
$('div').width(300);
$('div').height(300);
console.log($('div').width())
$('div').innerWidth(300);
console.log($('div').width());
$('div').outerWidth(300)
console.log($('div').width());
$('div').outerWidth(300, true)
console.log($('div').width());
console.log($('div').get(0).offsetWidth)
console.log($('div').width())
console.log($(window).width())
console.log($(window).height())
console.log($(document).width());
console.log($('body').width());
</script>
</body>
</html>