时间戳

首页 > 解决方案 > 更改 css 文件中的每个相同 css 属性

javascript - 更改 css 文件中的每个相同 css 属性

问题描述

在我的 CSS 文件中，我有更多相同颜色的类和 id。我的意思是“相同颜色”是一种视觉效果。所以，它可以是“颜色”属性，也可以是“背景颜色”和“.class:hover”。

所以同样的事情是一个词#33453

我想#33453用 jquery 更改 CSS 文件中的所有内容。我该怎么做？

我的css文件喜欢这样：

<style>
.button-color, .button-border {
color:red;
border-color:#33453;
}

#background-color, button-background-color:hover {
background-color:#33453
}
</style>

我刚发现这个：

$("body").children().each(function () {
    $(this).html( $(this).html().replace(/@/g,"$") );
});

我想要的东西太棒了，但是如何用 css 文件更改“body”选择器？

标签： javascriptjquery

解决方案

CSS 变量来救援！

您可以创建 CSS 变量，这些变量可以在整个样式表中引用。

在样式表的开头写一个 root:。然后在变量名的前面加上“--”。

:root {
  --main-color: #33453;
}

然后在您的样式表中，您可以使用 var() 引用 CSS 变量。

.button-color, .button-border {
  color:red;
  border-color: var(--main-color);
}

#background-color, button-background-color:hover {
  background-color: var(--main-color);
}

您还可以以级联方式更改此变量。所以如果你有......说......一个“黑暗”部分，你也可以添加

.dark {
  --main-color: white;
}

现在 .dark 内带有主色的任何东西都会有所不同。

推荐阅读