js怎样获取dom元素的样式-js教程-PHP中文网

js怎样获取dom元素的样式

幻夢星雲

发布： 2025-08-05 08:10:02

原创

331人浏览过

获取dom元素样式最常用的方法是使用window.getcomputedstyle()，1. 使用getcomputedstyle()可获取元素最终生效的所有css属性，包括外部样式表、内部样式和内联样式；2. 直接访问元素的style属性只能获取内联样式，无法读取外部或内部样式表中的样式；3. getpropertyvalue()方法可直接使用css属性名（如'background-color'）获取值，无需转换为驼峰命名；4. 获取css变量需通过getcomputedstyle()结合getpropertyvalue()，并传入变量名如'--primary-color'；5. 为提升性能，应缓存getcomputedstyle()结果，避免重复调用；6. 当样式动态改变时，必须重新调用getcomputedstyle()以获取最新样式值，缓存对象不会自动更新。综上，应根据场景选择合适方法，并注意性能优化与样式更新机制，以确保准确高效地获取元素样式。

js怎样获取dom元素的样式

获取DOM元素的样式，说白了就是读取元素当前生效的CSS属性值。这事儿在JavaScript里，可选择的路子还挺多的，但要根据具体情况选最合适的。

解决方案

最常用的方法是使用

window.getComputedStyle()

登录后复制

。这个方法能获取到元素最终应用的所有CSS属性，包括通过CSS文件、

<style>

登录后复制

标签以及内联样式设置的。

const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
const backgroundColor = style.backgroundColor;
console.log(backgroundColor); // 例如：'rgb(255, 255, 0)'

登录后复制

getComputedStyle()

登录后复制

返回的是一个

CSSStyleDeclaration

登录后复制

对象，你可以像访问普通对象属性一样访问CSS属性。需要注意的是，属性名要使用驼峰命名法，比如

background-color

登录后复制

要写成

backgroundColor

登录后复制

。

另一种方式是直接访问元素的

style

登录后复制

属性。但是，这种方法只能获取到元素的内联样式，也就是直接写在HTML标签里的

style

登录后复制

属性中的样式。

const element = document.getElementById('myElement');
const backgroundColor = element.style.backgroundColor;
console.log(backgroundColor); // 例如：'yellow'，如果内联样式设置了 background-color

登录后复制

如果你的样式是通过CSS文件或

<style>

登录后复制

标签定义的，

element.style

登录后复制

是获取不到的。

还有一些不常用的方法，比如

currentStyle

登录后复制

属性（IE特有，现在基本不用了）以及

getPropertyValue()

登录后复制

方法。

const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
const backgroundColor = style.getPropertyValue('background-color');
console.log(backgroundColor); // 例如：'rgb(255, 255, 0)'

登录后复制

getPropertyValue()

登录后复制

方法接收CSS属性名作为参数，返回对应的属性值。这种方式的好处是可以直接使用CSS属性名，不需要转换成驼峰命名法。

壁纸样机神器

免费壁纸样机生成

查看详情

如何处理CSS变量？

CSS变量（也叫自定义属性）在现代Web开发中越来越常见。要获取CSS变量的值，需要结合

getComputedStyle()

登录后复制

和

getPropertyValue()

登录后复制

。

const element = document.documentElement; // 获取根元素，通常是<html>
const style = window.getComputedStyle(element);
const primaryColor = style.getPropertyValue('--primary-color');
console.log(primaryColor); // 例如：'#007bff'

登录后复制

这里，

--primary-color

登录后复制

是CSS变量的名字。注意，要获取定义CSS变量的元素，通常是根元素

document.documentElement

登录后复制

或者定义变量的特定元素。

性能考虑：

getComputedStyle()

登录后复制

真的慢吗？

关于

getComputedStyle()

登录后复制

的性能，一直有一些争议。理论上，每次调用

getComputedStyle()

登录后复制

都会重新计算元素的样式，这可能会带来性能问题。

但实际上，现代浏览器对

getComputedStyle()

登录后复制

做了很多优化，性能瓶颈通常不在于这个方法本身，而在于频繁地操作DOM。

如果需要频繁地获取同一个元素的样式，可以考虑将

getComputedStyle()

登录后复制

的结果缓存起来，避免重复计算。

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element); // 缓存结果

function getCachedStyle(propertyName) {
  return computedStyle[propertyName];
}

const backgroundColor = getCachedStyle('backgroundColor');
const fontSize = getCachedStyle('fontSize');

登录后复制

样式改变后，如何实时获取最新的样式？

如果元素的样式是通过JavaScript动态改变的，你需要确保在样式改变后重新获取样式值。直接访问缓存的

computedStyle

登录后复制

对象是不会更新的。

const element = document.getElementById('myElement');
let computedStyle = window.getComputedStyle(element);

function updateBackgroundColor(newColor) {
  element.style.backgroundColor = newColor;
  computedStyle = window.getComputedStyle(element); // 重新获取
}

updateBackgroundColor('red');
console.log(computedStyle.backgroundColor); // 现在是 'rgb(255, 0, 0)'

登录后复制

每次改变样式后，都要记得更新