javascript获取隐藏元素(display:none)的高度和宽度的方法-前端开发

获取隐藏元素的高度和宽度是前端开发中一个很常见的需求。在使用display:none来隐藏元素时，它的高度和宽度是不可见的，这时候我们需要使用一些技巧来获取它们的真实高度和宽度。下面我将介绍两种常见的方法。

获取隐藏元素的高度和宽度是前端开发中一个很常见的需求。在使用display:none来隐藏元素时，它的高度和宽度是不可见的，这时候我们需要使用一些技巧来获取它们的真实高度和宽度。下面我将介绍两种常见的方法。

一、使用getBoundingClientRect()方法

getBoundingClientRect()是JavaScript中的一个方法，可以获取任何元素在页面中的位置、大小等信息。即使元素是隐藏的，也能够获取到它的大小。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>get hidden element size using getBoundingClientRect()</title>
    <meta charset="utf-8">
    <style>
        #box {
            display: none;
            width: 200px;
            height: 100px;
            background: #f00;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        var rect = box.getBoundingClientRect();
        console.log(rect.width);
        console.log(rect.height);
    </script>
</body>
</html>

在这个示例中我们创建了一个div元素，它被设置为display:none。在JavaScript中我们获取到这个div的引用，并调用其getBoundingClientRect()方法，得到一个包含元素大小信息的矩形对象rect。我们可以通过访问rect对象的width和height属性来获取这个元素的宽度和高度。在浏览器的开发者工具控制台中输出，我们可以看到输出的宽度和高度分别为200和100，与设置的CSS属性相同。

二、使用cloneNode()复制元素

另一种获取隐藏元素大小的方法是复制该元素，然后将它的display属性设置为block，这样就可以获取元素的真实大小了。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>get hidden element size using cloneNode()</title>
    <meta charset="utf-8">
    <style>
        #box {
            display: none;
            width: 200px;
            height: 100px;
            background: #f00;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        var clone = box.cloneNode(true);
        clone.style.display = 'block';
        document.body.appendChild(clone);
        console.log(clone.offsetWidth);
        console.log(clone.offsetHeight);
        document.body.removeChild(clone);
    </script>
</body>
</html>

在这个示例中，我们使用了JavaScript的cloneNode()方法，将div元素的副本clone插入到了DOM树中，并设置了它的display属性为block。然后我们可以通过访问clone对象的offsetWidth和offsetHeight属性来获取元素的宽度和高度。在代码的最后我们将复制的元素从DOM树中删除。输出的结果与前一个示例相同。

以上就是获取隐藏元素大小的两种方法，开发者可以根据实际需求选择适合自己的方法。