以下是一些 jQuery 尺寸相关的方法:
1. 获取元素的宽度和高度:
var width = $('#myElement').width();
var height = $('#myElement').height();
这将返回 #myElement 元素的宽度和高度。
2. 设置元素的宽度和高度:
$('#myElement').width(300);
$('#myElement').height(150);
这将设置 #myElement 元素的宽度为 300 像素,高度为 150 像素。
3. 获取元素的内部宽度和高度(包括内边距):
var innerWidth = $('#myElement').innerWidth();
var innerHeight = $('#myElement').innerHeight();
这将返回 #myElement 元素的内部宽度和高度,包括内边距。
4. 获取元素的外部宽度和高度(包括边框):
var outerWidth = $('#myElement').outerWidth();
var outerHeight = $('#myElement').outerHeight();
这将返回 #myElement 元素的外部宽度和高度,包括边框。
5. 获取元素的外部宽度和高度(包括边框和外边距):
var outerWidthWithMargin = $('#myElement').outerWidth(true);
var outerHeightWithMargin = $('#myElement').outerHeight(true);
在这里,true 作为参数表示包括外边距。
下面是一个完整的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 尺寸</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
#myElement {
width: 200px;
height: 100px;
border: 2px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div id="myElement">这是一个元素</div>
<script>
// 获取并输出元素的宽度和高度
var width = $('#myElement').width();
var height = $('#myElement').height();
console.log('Width: ' + width + ', Height: ' + height);
// 设置元素的新宽度和高度
$('#myElement').width(300);
$('#myElement').height(150);
// 获取并输出元素的外部宽度和高度(包括边框和外边距)
var outerWidthWithMargin = $('#myElement').outerWidth(true);
var outerHeightWithMargin = $('#myElement').outerHeight(true);
console.log('Outer Width with Margin: ' + outerWidthWithMargin + ', Outer Height with Margin: ' + outerHeightWithMargin);
</script>
</body>
</html>
在这个例子中,首先获取并输出了元素的宽度和高度,然后使用 .width() 和 .height() 方法设置了新的宽度和高度,最后获取并输出了元素的外部宽度和高度(包括边框和外边距)。
确保在使用 jQuery 之前引入 jQuery 库。
转载请注明出处:http://www.zyzy.cn/article/detail/12885/jQuery