Js获取DOM元素宽高，Js获取不到DOM元素宽高

前端卡卡西呀

于 2020-12-24 15:32:08 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.csdn.net/RedaTao/article/details/110954365

Javascript 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了JavaScript中获取元素样式的三种方法：style对象、window.getComputedStyle和getBoundingClientRect。style对象只能获取内联样式，而window.getComputedStyle可获取元素的所有计算样式，包括来自style标签和外部CSS文件的样式。getBoundingClientRect则能获取元素的位置和尺寸信息。这三种方法在不同的场景下各有优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dom及css样式如下：

<style>
    #element {
        background-color: aquamarine;
        width: 100px;
    }
</style>
<div id="element" style="height: 100px;"></div>

方法1: element.style.width/height

const el = document.getElementById('element');
console.log(el.style.width); // "" style对象取不到 style标签中定义的样式
console.log(el.style.height); // “100px”

⚠️注意：style对象只能获取内联样式（dom中的style里的样式）

方法2: window.getComputedStyle(element).width/height

const el = document.getElementById('element');
console.log(window.getComputedStyle(el).width); // "100px"
console.log(window.getComputedStyle(el).height); // "100px"

注意：window.getComputedStyle()可以实时获得style属性

方法3: Element.getBoundingClientRect().width/height

const el = document.getElementById('element');
console.log(el.getBoundingClientRect().width); // "100px"
console.log(el.getBoundingClientRect().height); // "100px"

注意：此方法除了能获取宽高，还能获取元素位置等信息