javascript - 将参数从网页传递给 CSS 类

Question

问题陈述是，我有 2-3 个网页；我想在此页面上使用不同的主体颜色，但要保留“myBody”唯一的类名。

我找了很多博客和作者，但没有找到任何合适的答案来通过传统的 CSS 方法实现这一目标。

请建议是否可以让单个 CSS 类接受来自网页的参数，该参数将决定使用具有不同参数的相同 CSS 应应用哪种主体颜色“

    .myBody(@color)
     {
     background-color: @color;
     font-size: 11px;
     color: Black;
     border: 1px solid;

     }

这个答案对某些人来说可能有些棘手，但我真的很想看看我是否可以只使用 CSS 来实现这个目标。

Answer 1

你应该像这样把它们分成不同的类。

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
 }
 .background_red
 {
     background: red;
 }
 .background_green
 {
     background: green;
 }

然后像这样使用它们

<div class="mybody background_red"></div>

<div class="mybody background_green"></div>

您还可以像这样覆盖 css:

.myBody
{
    background:red;
}
.overwrite_background
{
    background:green;
}

<div class="myBody"></div>
<div class="myBody overwrite_background"></div>

第一个 div 的背景为红色，第二个 div 的背景为绿色。

这是您应该查看的另一篇文章。这引用了您必须处理这种情况的几个选项。 How to pass parameters to css classes

另一种选择是使用 Sass . Sass 允许您使用编程语言来创建您的 css。这对于即时更改大量内容非常有用。如果你在多个地方使用相同的颜色，或者如果你想对每个站点进行不同的配置并且仍然使用相同的 css 只是不同的颜色。