从网页将参数传递给 CSS 类答案

【问题标题】：Passing a parameter to a CSS class from web page从网页将参数传递给 CSS 类
【发布时间】：2015-04-15 16:56:50
【问题描述】：

问题陈述是，我有 2-3 个网页；我想在这个页面上有不同的正文颜色，但保持类名对“myBody”是唯一的。

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

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

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

     }

对于某些人来说答案可能很棘手，但我真的很想看看我是否可以仅使用 CSS 来实现这一点。

【问题讨论】：

您可以将 .myBody 类拆分为不同的 CSS 类，并让您的每个 body 使用两个（通用的一个和一个特定的）
你必须使用另一个类并添加规则，如.myBody.red { background-color: red; }
将来您将能够为您的 <body> 标签添加一个单独的属性，然后通过 attr() 运算符在 CSS 规则中访问该属性，但这并未得到广泛支持（如果在全部）今天。
@Pointy 是在我可以阅读的任何 w3 草案中吗？我对attr() 到目前为止只能在content 中使用感到失望，并且想知道是否/何时有计划将其扩展到其他属性
@AlvaroMontoro 这是一个 CSS3 的东西。 CSS2 仅允许在 content 属性上使用 attr()。

标签： javascript html css

【解决方案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 只是不同的颜色。

【讨论】：

这是您应该查看的另一篇文章。这参考了您必须处理这种情况的几个选项。 stackoverflow.com/questions/17893823/…
更准确地说，如果我有严格的说明，只使用一个类名作为 body 标签，如下所示：在 Page1： .... 和 Page2： .... ;现在在这两种情况下，我只有一个选项可以从它自己的页面传递参数，或者有任何其他可能的解决方案。请同时提出一些与此约束相关的建议。
感谢 Sari Rahal 的链接，但这又是在我的 CSS 文件中编写多个 CSS 类。而且我没有使用任何服务器端编程语言。链接上有 3 个 -4 技巧，您能否建议该问题陈述使用哪一个套件？
这取决于您的知识。如果你擅长 JS，我会建议你最好的选择。如果你不是，你的下一步将是嵌入 php 的

【解决方案2】：

不，你不能用一个类定义来做到这一点。 CSS中没有参数和函数调用的概念。

另一方面，您可以通过最少的代码重复来做到这一点，但这可能是个坏主意。你说你想假设class 属性中只有一个类名。这很愚蠢，因为它完全误解了 class 属性的用途，但无论如何我们都会继续使用它。

我们将从只使用背景颜色定义我们的类开始：

.mybody-red {
  background-color: red;
}
.mybody-blue {
  background-color: blue;
}
.mybody-green {
  background-color: green;
}

然后我们将为所有mybody-* 类定义代码，属性为starts-with 选择器：

div[class^="mybody-"] {
  font-size: 11px;
  color: Black;
  border: 1px solid;
}

然而，这是一个愚蠢的想法，尤其是因为这意味着您没有将标记与样式分开，以及出于无数其他原因。

【讨论】：

感谢@lonesomeday！我已经接受这个问题是愚蠢的这个限制。我刚刚读到将 mixins 传递给您的 LESS css 定义。如果它为我提供了解决方案，让我探索这个解决方案。再次感谢大家的宝贵建议。 #less这里需要勾选。

【解决方案3】：

也许你可以在每个页面中给出一个唯一的 id 并保持相同的类。我的意思是

file1.html
<html>
<body id="file1">
<div class"myBody"></div>
</body>
</html>

  file2.html
<html>
<body id="file2">
<div class"myBody"></div>
</body>
</html>

       file3.html
<html>
<body id="file3">
<div class"myBody"></div>
</body>
</html>

你有 3 个不同的文件。每个文件都有一个带有唯一 id 的 body 标签和一个带有你想要的类的 div 标签现在是 css 部分：

.myBody
 {
     font-size: 11px;
     color: Black;
     border: 1px solid;
}/*common class for all files*/

#file1 .myBody{
background:green;
}

#file2 .myBody{
background:red;
}
  #file3 .myBody{
background:grey;
}

如果你有 2-3 页，这很好用。如果你有更多，这将是一个难以维护的代码

【讨论】：

这适用于您有一两个例外情况，但由于页面过多而难以维护，并且还会使您的 CSS 膨胀。
如果我有 n 页数会怎样；我不想写更多更多的类，而只是想有一种方法可以将显式参数传递给类定义。
你是对的。如果你有 2-3 个网页是可以的，但不是很多页面

【解决方案4】：

作为替代选项，既然您打算通过页面传递颜色，为什么不使用 PHP 将样式设置为内联属性？虽然最好将大部分 css 放在一个单独的文件中，但有时沿着可接受的 CSS 放置的层次结构向下移动是有意义的。

我不确定您具体是从哪里获得颜色的，但是如果这是最有效的方法，那么设置内联样式并没有错。

例子：

<?php $bodyColor = $_POST['bodyColor']; ?>
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>">
    YOUR TEXT
</div>

【讨论】：

感谢您的建议；但我想为我的代码提供更多的可扩展性和可管理性。所以我不会使用这种 INLINE 样式解决方案。