jQuery 宽度和高度方法详解：获取和设置元素尺寸

这段代码定义了 jQuery 中用于获取和设置元素宽度和高度的一组方法，包括 innerWidth、innerHeight、outerWidth、outerHeight 等。

代码通过两个嵌套的 each 循环来实现，第一个循环遍历一个包含 'Height' 和 'Width' 属性的对象，第二个循环遍历另一个包含 'padding'、'content' 和 'margin' 属性的对象。每个属性对应一个方法，用于获取或设置元素的宽度和高度。

代码结构

jQuery.each( { Height: 'height', Width: 'width' }, function( name, type ) {
	jQuery.each( { padding: 'inner' + name, content: type, '': 'outer' + name },
		function( defaultExtra, funcName ) {

		// Margin is only for outerHeight, outerWidth
		jQuery.fn[ funcName ] = function( margin, value ) {
			// ...
		};
	} );
} );

方法解析

• jQuery.fn[ funcName ]：定义了 funcName 方法，该方法是 jQuery 的原型方法，可以作用于任何 jQuery 对象。
• defaultExtra：表示是否包含边框和填充，如果为 true，则包含边框和填充。
• funcName：方法名称，例如 'innerWidth'、'outerWidth' 等。
• margin：可选参数，表示是否包含边距，如果为 true，则包含边距。
• value：可选参数，表示设置的宽度或高度值。

核心逻辑

方法的内部实现主要通过 access 函数来实现，access 函数根据参数的不同，调用不同的 jQuery 函数来实现获取或设置元素的宽度和高度。

示例

// 获取元素的内宽度
var innerWidth = $('div').innerWidth();

// 设置元素的外宽度
$('div').outerWidth(200);

总结

这段代码定义了一组方便获取和设置元素宽度和高度的方法，这些方法可以根据不同的参数来获取或设置元素的内宽度、内高度、外宽度和外高度，为开发者提供了高效的工具来处理元素尺寸问题。