将参数从网页传递到CSS类
[英]Passing a parameter to a CSS class from web page
问题描述
Problem statement is, I have 2-3 web pages; 
问题陈述是，我有2-3个网页; and I want to have different body colors on this pages but keeping the class name unique to "myBody". 我希望在这个页面上有不同的颜色，但保持类名称对“myBody”是唯一的。
I looked for many blogs and authors but did not find any suitable answer to achieve this from a traditional CSS approaches. 我寻找了许多博客和作者，但没有找到任何合适的答案来实现传统的CSS方法。
Please suggest if it is possible to have a single CSS class accepting a parameter from a web page which will decide what body color should be applied using the same CSS with different parameters" 请建议是否可以让一个CSS类接受来自网页的参数，该网页将使用具有不同参数的相同CSS来决定应该应用哪种体颜色“
.myBody(@color)
{
background-color: @color;
font-size: 11px;
color: Black;
border: 1px solid;
}
The answer may be tricky for some folks but I really want to see if I can achieve this using CSS only. 对于一些人来说，答案可能很棘手，但我真的想看看我是否只能使用CSS实现这一点。
4 个解决方案
解决方案1
5 2015-04-15 17:01:48
You should split them up into different classes like this. 你应该把它们分成不同的类。
.myBody
{
font-size: 11px;
color: Black;
border: 1px solid;
}
.background_red
{
background: red;
}
.background_green
{
background: green;
}
Then use them like this 然后像这样使用它们
<div class="mybody background_red"></div>
<div class="mybody background_green"></div>
You also have the ability to overwrite css like this: 您还可以像这样覆盖css：
.myBody
{
background:red;
}
.overwrite_background
{
background:green;
}
<div class="myBody"></div>
<div class="myBody overwrite_background"></div>
The first div would have a background of red where the second one would have a background of green. 第一个div的背景为红色，第二个div的背景为绿色。
Here is another post you should look at. 这是你应该看的另一篇文章。 This reference a couple of options you have to handle this situation. 这引用了一些您必须处理这种情况的选项。 How to pass parameters to css classes 如何将参数传递给css类
Another option is to use Sass . 另一种选择是使用Sass 。 Sass allows you to use a programming language to create your css. Sass允许您使用编程语言来创建CSS。 This is wonderful for changing things over a mass on the fly. 这对于在飞行中改变物体非常有用。 If you use the same color in multiple places, or if you want to have a different configuration for each site and still carry the same css just different colors. 如果您在多个位置使用相同的颜色，或者如果您希望为每个站点使用不同的配置，并且仍然使用相同的css只是不同的颜色。
解决方案2
0 2015-04-15 17:16:58
No, you can't do this with one class definition. 不，你不能用一个类定义来做到这一点。 There is no concept of parameters and function calls in CSS. CSS中没有参数和函数调用的概念。
On the other hand, you can just about do this with minimal code duplication, but it's probably a bad idea. 另一方面，你可以用最少的代码重复来做这件事，但这可能是一个坏主意。 You say that you want to assume that there is only one classname in the class attribute. 你说你想假设class属性中只有一个类名。 This is pretty silly, because it totally misunderstands what the class attribute is for, but we'll roll with it anyway. 这非常愚蠢，因为它完全误解了class属性的用途，但无论如何我们都会使用它。
We'll start by defining our classes with just the background colour: 我们首先使用背景颜色定义我们的类：
.mybody-red {
background-color: red;
}
.mybody-blue {
background-color: blue;
}
.mybody-green {
background-color: green;
}
Then we'll define code for all the mybody-* classes with the attribute starts-with selector: 然后我们将使用属性starts-with selector为所有mybody-*类定义代码：
div[class^="mybody-"] {
font-size: 11px;
color: Black;
border: 1px solid;
}
This is, however, a silly idea, not least because it means that you are not separating markup from styling, and for myriad other reasons. 然而，这是一个愚蠢的想法，尤其是因为它意味着你没有将标记与样式分离，并且出于各种其他原因。
解决方案3
0 2015-04-15 17:21:38
Maybe you can give a unique id in each page and keep the same class.What i mean is 也许你可以在每个页面中给出一个唯一的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>
You have 3 different files.Each file has a body tag with a unique id and a div tag with the class you want Now the css part: 你有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;
}
This works fine if you have 2-3 pages.If you have more it will be a hard code to maintain 如果你有2-3页，这可以正常工作。如果你有更多，它将是一个难以维护的代码
解决方案4
0 2015-04-15 18:55:20
As an alternate option, since you intend to pass the color via the page, why not just set the style as an inline property using PHP? 作为替代选项，由于您打算通过页面传递颜色，为什么不使用PHP将样式设置为内联属性？ While it's better to put most of your css in a separate file, sometimes it just makes sense to travel down the hierarchy of acceptable CSS placements. 虽然最好将大部分css放在一个单独的文件中，但有时候沿着可接受的CSS放置的层次结构前进是有意义的。
I'm not sure where you're getting the color from specifically, but there's nothing wrong with setting an inline style if that's the most efficient way to do it. 我不确定你从哪里获得颜色，但如果这是最有效的方式，设置内联样式没有任何问题。
Example: 例：
<?php $bodyColor = $_POST['bodyColor']; ?>
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>">
YOUR TEXT
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.