jQuery 尺寸学习笔记

jQuery 提供了许多方法来操作元素的尺寸。本文将介绍常用的 jQuery 尺寸方法，并提供实例。

获取元素尺寸

width() 和 height()

width() 和 height() 方法用于获取元素的宽度和高度，不包括 padding、border 和 margin。示例：

javascriptCopy Code
var width = $('#myDiv').width();
var height = $('#myDiv').height();
console.log('宽度：' + width + '，高度：' + height);

innerWidth() 和 innerHeight()

innerWidth() 和 innerHeight() 方法用于获取元素的宽度和高度，包括 padding，但不包括 border 和 margin。示例：

javascriptCopy Code
var width = $('#myDiv').innerWidth();
var height = $('#myDiv').innerHeight();
console.log('宽度：' + width + '，高度：' + height);

outerWidth() 和 outerHeight()

outerWidth() 和 outerHeight() 方法用于获取元素的宽度和高度，包括 padding 和 border，但不包括 margin。可传参来包含 margin。示例：

javascriptCopy Code
var width = $('#myDiv').outerWidth();
var height = $('#myDiv').outerHeight();
console.log('宽度：' + width + '，高度：' + height);

var widthWithMargin = $('#myDiv').outerWidth(true);
var heightWithMargin = $('#myDiv').outerHeight(true);
console.log('宽度（包括margin）：' + widthWithMargin + '，高度（包括margin）：' + heightWithMargin);

设置元素尺寸

width(value) 和 height(value)

width(value) 和 height(value) 方法用于设置元素的宽度和高度，可以传入数值或带有单位的字符串。示例：

javascriptCopy Code
$('#myDiv').width(500).height('50%');

innerWidth(value) 和 innerHeight(value)

innerWidth(value) 和 innerHeight(value) 方法用于设置元素的宽度和高度，包括 padding，可以传入数值或带有单位的字符串。示例：

javascriptCopy Code
$('#myDiv').innerWidth(500).innerHeight('50%');

outerWidth(value) 和 outerHeight(value)

outerWidth(value) 和 outerHeight(value) 方法用于设置元素的宽度和高度，包括 padding 和 border，可以传入数值或带有单位的字符串。传参来包含 margin。示例：

javascriptCopy Code
$('#myDiv').outerWidth(500).outerHeight('50%', true);

示例

下面是一个实际应用的示例，当窗口大小改变时，自适应调整元素尺寸：

javascriptCopy Code
$(window).resize(function() {
  var w = $(this).width();
  var h = $(this).height();
  $('#myDiv').width(w * 0.8).height(h * 0.4);
});

以上就是 jQuery 尺寸学习笔记的内容，希望能对读者有所帮助。