Javascript 获取 Dom 样式的方法有哪些

在Web开发中，JavaScript是与HTML和CSS交互不可或缺的工具，尤其是在获取和修改DOM元素样式上。获取DOM样式的主要方法有window.getComputedStyle()、element.style对象、以及旧式的element.currentStyle属性。其中，window.getComputedStyle() 方法是最为推荐的方式，因为它能提供一个元素的最终样式表，包括由外部样式表和内联样式定义的样式信息。

一、WINDOW.GETCOMPUTEDSTYLE()

window.getComputedStyle() 方法接受一个元素和一个伪元素字符串（如果不需伪元素样式，则为null）作为参数，返回一个CSS样式声明对象，该对象中包含了指定元素的所有最终使用的CSS属性值。这个方法的优势在于它能够获取由外部样式表定义的样式，以及在元素上直接应用的内联样式。

首先，window.getComputedStyle()方法返回的CSS样式声明对象是只读的，它代表了应用到元素上的所有样式规则的综合。例如，要获取一个元素的背景颜色或字体大小，我们可以这样做：

let element = document.querySelector('.my-element');

let style = window.getComputedStyle(element);
let backgroundColor = style.backgroundColor;
let fontSize = style.fontSize;

此方法考虑了样式的层叠和继承规则，因此得到的值是最终展示给用户的样式，而非仅是那些直接设置在元素上的样式。

二、ELEMENT.STYLE 对象

与window.getComputedStyle()不同，element.style 提供了一个元素上直接设置的内联样式的接口。这个对象只包含元素的行内样式，即那些通过元素的style属性直接设置的样式，而不是通过样式表应用的样式。

使用element.style 对象时，我们可以直接读取或设置元素的行内样式。例如，改变一个元素的颜色和边距可以这样做：

let element = document.querySelector('.my-element');

element.style.color = 'red';
element.style.margin = '16px';

然而，要注意的是，element.style对象无法访问那些未通过元素的style属性设置的样式（例如，在样式表中定义的样式）。

三、ELEMENT.CURRENTSTYLE（IE专有）

element.currentStyle属性是微软IE浏览器特有的一个特性，相当于非IE浏览器中的window.getComputedStyle()方法。它返回的是元素当前应用的所有样式的集合。

然而，由于这个属性只存在于旧版本的IE浏览器中，而现代Web开发中已经较少考虑IE的兼容性，因此在多数情况下，element.currentStyle的使用并不推荐。

let element = document.getElementById('myElement');

let style = element.currentStyle;
let backgroundColor = style.backgroundColor;

考虑到跨浏览器兼容性，window.getComputedStyle()方法是获取DOM元素样式的最佳选择，而element.style适用于操作元素的内联样式。开发者需要根据具体需求，灵活选择获取DOM样式的方法。

四、结论

在实践中，选择最合适的方法获取DOM元素样式往往依赖于特定的需求。对于需要精确获取元素最终样式信息的场景，window.getComputedStyle()是无疑最强大、最可靠的工具。而在操作元素的内联样式、或是在特定条件下考虑旧版IE浏览器兼容性时，element.style或element.currentStyle则可能更加适用。理解并运用这些方法的差异和优势，对于开发出兼顾性能和兼容性的Web应用至关重要。

相关问答FAQs：

1. JavaScript如何获取DOM元素的样式？
JavaScript有多种方法可以获取DOM元素的样式。其中一种常见的方法是使用getComputedStyle()函数来获取元素的样式属性。例如，var elementStyle = window.getComputedStyle(element)将会返回一个包含元素样式属性的对象，你可以通过elementStyle.propertyName来获取具体的样式属性的值。

2. 如何通过JavaScript改变DOM元素的样式？
JavaScript提供了一些不同的方法来改变DOM元素的样式。最常见的方法是使用style属性，例如element.style.propertyName = "value"。你可以通过这种方式直接设置元素的样式属性。另外，还可以使用classList属性来添加或移除元素的类，并通过CSS样式表的类选择器来改变元素的样式。

3. JavaScript如何判断DOM元素是否具有某个样式类？
想要判断DOM元素是否具有某个样式类，可以使用classList属性提供的方法。其中contAIns()方法可以检查元素是否具有指定的样式类。例如，element.classList.contains("className")将会返回一个布尔值，如果元素具有指定的样式类则为true，否则为false。这可以方便我们在JavaScript中根据样式类的存在与否来执行相应的操作。