js 获取div的宽度和高度|极客笔记

js 获取div的宽度和高度

在前端开发中，经常会遇到需要获取某个元素的宽度和高度的情况，例如在实现响应式布局或者动态调整元素尺寸时。本文将详细介绍如何使用JavaScript来获取一个div元素的宽度和高度。

1. 使用offsetWidth和offsetHeight属性

在JavaScript中，我们可以使用元素的offsetWidth和offsetHeight属性来获取元素的宽度和高度。这两个属性返回的是元素的尺寸，包括边框和内边距，但不包括外边距和滚动条。

<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>

<script>
    const myDiv = document.getElementById('myDiv');
    const width = myDiv.offsetWidth;
    const height = myDiv.offsetHeight;

    console.log(`Div的宽度为： ${width}px，高度为：$ {height}px`);
</script>

在上面的示例中，我们首先获取id为”myDiv”的div元素，然后分别使用offsetWidth和offsetHeight属性获取其宽度和高度，并通过console.log输出。

2. 使用getComputedStyle方法

除了offsetWidth和offsetHeight属性，我们还可以使用getComputedStyle方法来获取元素的样式，包括宽度和高度。

<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>

<script>
    const myDiv = document.getElementById('myDiv');
    const styles = window.getComputedStyle(myDiv);
    const width = parseFloat(styles.width);
    const height = parseFloat(styles.height);

    console.log(`Div的宽度为： ${width}px，高度为：$ {height}px`);
</script>

在上面的示例中，我们首先获取id为”myDiv”的div元素，然后使用getComputedStyle方法获取该元素的样式，最后通过parseFloat方法将宽度和高度转为数值，并输出。

3. 使用clientWidth和clientHeight属性

另外，还可以使用元素的clientWidth和clientHeight属性来获取元素的内容区域的宽度和高度，不包括边框和内边距。

<div id="myDiv" style="width: 200px; height: 100px; padding: 10px; background-color: lightblue;"></div>

<script>
    const myDiv = document.getElementById('myDiv');
    const clientWidth = myDiv.clientWidth;
    const clientHeight = myDiv.clientHeight;

    console.log(`Div的内容区域宽度为： ${clientWidth}px，高度为：$ {clientHeight}px`);
</script>

在上面的示例中，我们首先获取id为”myDiv”的div元素，然后分别使用clientWidth和clientHeight属性获取其内容区域的宽度和高度，并通过console.log输出。

4. 使用getBoundingClientRect方法

最后，我们还可以使用getBoundingClientRect方法来获取元素相对于视口的位置和尺寸信息，包括元素的绝对位置、宽度和高度。

<div id="myDiv" style="width: 200px; height: 100px; padding: 10px; background-color: lightblue;"></div>

<script>
    const myDiv = document.getElementById('myDiv');
    const rect = myDiv.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;

    console.log(`Div的宽度为： ${width}px，高度为：$ {height}px`);
</script>

在上面的示例中，我们首先获取id为”myDiv”的div元素，然后使用getBoundingClientRect方法获取其位置和尺寸信息，并通过rect.width和rect.height获取宽度和高度，并输出。

总结一下，我们可以通过以上几种方式来获取div元素的宽度和高度，根据实际需求选择合适的方法进行使用。