CSS 获取计算样式并忽略默认值

在本文中，我们将介绍如何使用CSS获取计算样式并忽略默认值。计算样式是经过浏览器计算后应用到元素上的样式，而默认值是浏览器根据规范设定的初始样式。

阅读更多：CSS 教程

什么是计算样式？

计算样式是当元素经过CSS解析和计算后应用到元素上的样式。它是最终应用于元素的样式，可以通过计算样式获取到最终渲染的样式值。

计算样式中包含了各种CSS属性和对应的值，例如宽度、高度、颜色等。通过获取计算样式，我们可以获取到元素最终应用的样式，包括内联样式、继承样式以及浏览器默认样式。

如何获取计算样式？

要获取计算样式，可以使用JavaScript中的window.getComputedStyle()方法。该方法接受两个参数，第一个参数是要获取计算样式的元素，第二个参数是可选的伪元素。

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

通过上述代码，我们可以获取到id为”myElement”的元素的计算样式。computedStyle变量将包含元素的计算样式对象。

忽略默认值

在获取计算样式时，默认值也会被包含在计算样式中。而有些时候，我们可能只关心设置了非默认值的样式。

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

// 忽略默认值
const nonDefaultStyles = {};
for (const prop in computedStyle) {
  if (computedStyle[prop] !== "normal") {
    nonDefaultStyles[prop] = computedStyle[prop];
  }
}

console.log(nonDefaultStyles);

在上述示例中，我们使用一个循环遍历计算样式对象的属性。如果属性值不是默认值”normal”，则将其添加到nonDefaultStyles对象中。

通过这种方式，我们可以忽略默认值，仅获取设置了非默认值的样式。这对于一些场景，比如制作样式预览或者仅获取改动样式等，非常有用。

示例说明

假设我们有一个按钮元素，其默认样式包括宽度、高度、颜色等属性。我们需要获取该按钮的计算样式，并忽略默认值。

HTML代码如下：

<button id="myButton">Click Me!</button>

我们可以使用以下JavaScript代码获取计算样式并忽略默认值：

const button = document.getElementById("myButton");
const computedStyle = window.getComputedStyle(button);

const nonDefaultStyles = {};
for (const prop in computedStyle) {
  if (computedStyle[prop] !== "normal") {
    nonDefaultStyles[prop] = computedStyle[prop];
  }
}

console.log(nonDefaultStyles);

通过上述代码，我们将输出设置了非默认值的计算样式。例如，如果我们在CSS中设置了按钮的颜色和字体大小，而其他样式使用了浏览器默认值，那么输出中将只包含这两个设置了非默认值的样式。

总结

本文介绍了如何获取计算样式并忽略默认值。计算样式是浏览器计算后应用到元素上的样式，可以通过window.getComputedStyle()方法进行获取。而要忽略默认值，我们可以通过比较属性值是否为”normal”来实现。这对于一些特定的应用场景非常有用，能够提取出设置了非默认值的样式，方便样式的展示和处理。