Query常用DIV操作获取和设置长度宽度的实现方法

获取和设置元素的长度和宽度，是前端开发中经常需要涉及的操作。在 Query 中，可以通过 DIV 操作来实现。以下是该操作的具体攻略及两个示例说明：

1. 获取元素的长度和宽度

获取元素的长度和宽度，可以使用 width() 和 height() 方法。

• width() 方法用于返回元素的宽度，包括 padding 和 border 的宽度，但不包括 margin 的宽度。

例如，以下代码获取了 div 元素的宽度并输出：

let divWidth = $('div').width();
console.log('div的宽度为：' + divWidth);

• height() 方法用于返回元素的高度，包括 padding 和 border 的高度，但不包括 margin 的高度。

例如，以下代码获取了 div 元素的高度并输出：

let divHeight = $('div').height();
console.log('div的高度为：' + divHeight);

2. 设置元素的长度和宽度

设置元素的长度和宽度，可以使用 css() 方法。

例如，以下代码将 div 元素的宽度设置为 200px：

$('div').css('width', '200px');

同样地，以下代码将 div 元素的高度设置为 100px：

$('div').css('height', '100px');

示例说明

以下是两个示例，分别针对获取和设置元素的长度和宽度：

示例 1：获取元素的长度和宽度

假设有一个 div 元素，其宽度为 400px，高度为 300px。以下代码将获取该元素的宽度和高度，并输出到控制台：

let divWidth = $('div').width();
let divHeight = $('div').height();

console.log('div的宽度为：' + divWidth);
console.log('div的高度为：' + divHeight);

输出结果为：

div的宽度为：400
div的高度为：300

示例 2：设置元素的长度和宽度

假设有一个 div 元素，其宽度为 400px，高度为 300px。以下代码将设置该元素的宽度为 200px，高度为 100px：

$('div').css('width', '200px');
$('div').css('height', '100px');

最终，该 div 元素的宽度将变为 200px，高度将变为 100px。