JS获取元素宽度|极客笔记

JS获取元素宽度

在前端开发中，经常会遇到需要获取页面元素的宽度的情况，比如实现响应式布局、计算元素的位置等。本文将详细介绍如何使用JavaScript获取元素的宽度，包括通过原生JavaScript和jQuery两种方式实现。

通过原生JavaScript获取元素宽度

在原生JavaScript中，我们可以通过offsetWidth属性来获取元素的宽度。offsetWidth包含元素的宽度、内边距和边框，但不包括外边距和滚动条。下面是一个示例代码：

// 获取元素宽度
function getElementWidth(element) {
    return element.offsetWidth;
}

// 通过id获取元素
var element = document.getElementById('my-element');

// 获取元素宽度
var width = getElementWidth(element);

console.log(width);

在上面的代码中，getElementWidth函数接收一个元素作为参数，然后返回该元素的宽度。我们首先通过document.getElementById方法获取一个id为my-element的元素，然后调用getElementWidth函数获取该元素的宽度。

通过jQuery获取元素宽度

如果项目中已经引入了jQuery库，我们也可以使用jQuery来获取元素的宽度。jQuery提供了width()方法来获取元素的宽度，此方法与offsetWidth类似，包含元素的宽度、内边距和边框。下面是一个示例代码：

// 通过id获取元素宽度
var width = $('#my-element').width();

console.log(width);

在上面的代码中，$('#my-element')选中id为my-element的元素，然后调用width()方法获取该元素的宽度。

示例

接下来，我们来实际运行一下上面的示例代码，看一下获取元素宽度的结果。

假设我们有一个HTML文件，其中包含一个id为my-element的div元素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Element Width</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="my-element" style="width: 200px; height: 100px; background-color: #f00;"></div>

<script>
    // 获取元素宽度
    function getElementWidth(element) {
        return element.offsetWidth;
    }

    // 通过id获取元素
    var element = document.getElementById('my-element');

    // 获取元素宽度
    var width = getElementWidth(element);

    console.log('Element width with vanilla JavaScript:', width);

    // 通过id获取元素宽度
    var jWidth = $('#my-element').width();
    console.log('Element width with jQuery:', jWidth);
</script>

</body>
</html>

在上面的HTML文件中，我们首先引入了jQuery库，然后定义了一个id为my-element的div元素，宽度为200px。接着在JavaScript部分分别使用原生JavaScript和jQuery获取了该元素的宽度，并将结果打印到控制台中。

在浏览器中打开该HTML文件，打开开发者工具控制台，我们可以看到打印出的元素宽度为200和200，分别对应原生JavaScript和jQuery获取的结果。

通过以上示例，我们可以看到使用原生JavaScript和jQuery获取元素宽度的方法及结果。在实际开发中可以根据具体情况选择合适的方式来获取元素的宽度，从而实现页面布局和交互效果。