Html 如何将参数传递给css类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17893823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass parameters to css classes
提问by Mostafa Talebi
I want to know is it possible to add some flexibility to css via this:
我想知道是否可以通过以下方式为 css 添加一些灵活性：
<div class='round5'></div>
where .roundis a class with round corners and '5' determines the amount of radius. Is it possible? I have seen some where, but I don't know how the implementation takes place.
其中.round是一个带有圆角的类，'5' 决定了半径的大小。是否可以？我见过一些地方，但我不知道实现是如何发生的。
回答by stwilz
For anyone stumbling across this in 2018, whilst not fully supportedCSS variables now give you the ability to pass a variable directly into your class.
对于 2018 年遇到此问题的任何人，虽然不完全支持CSS 变量，但现在让您能够将变量直接传递到您的类中。
<div class="round" style="--radius: 100%;"></div>
<style>
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
You can also define root variables and pass them in as well
您还可以定义根变量并将它们传入
<div class="round" style="--radius: var(--rad-50);"></div>
<style>
:root {
--rad-0: 0%;
--rad-50: 50%;
--rad-100: 100%;
}
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
This is also scoped to the element as well. If you set the --radiusin one element is wont effect another element. Pretty jazzy right!
这也适用于元素。如果您--radius在一个元素中设置 不会影响另一个元素。相当爵士吧！
回答by daGUY
You can't define the border radius separate from its value because it's all one property. There's no way to tell an element to have rounded corners "in general" without also specifying how much to round them by.
您不能将边界半径与其值分开定义，因为它都是一个属性。没有办法告诉元素“一般”具有圆角，而不指定圆角的数量。
However, you can do something kind of similar with multiple classes and different properties:
但是，您可以对多个类和不同的属性执行类似的操作：
HTML:
HTML：
<div class="rounded blue"></div>
<div class="rounded green"></div>
CSS:
CSS：
.rounded {
border-radius: 5px;
}
.blue {
background: blue;
}
.green {
background: green;
}
The .roundedclass adds the border radius and the .blueand .greenclasses add the background color.
本.rounded类添加边框半径和.blue和.green类添加背景颜色。
(I like to name and order the classes such that they read logically, like <div class="large box"></div>, etc.).
（我喜欢对类进行命名和排序，以便它们能够合乎逻辑地阅读，例如<div class="large box"></div>等）。
回答by Cody Guldner
Here is an answer that I came up with that requires a small amount of jQuery, and a small knowledge of Regex.
这是我想出的一个答案，它需要少量的 jQuery 和少量的 Regex 知识。
$(function() {
var number = $("div").attr("class").match(/\d+$/);
$("div").css({
"width": "100px",
"height": "100px",
"background-color": "green",
"border-radius": number + "px"
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>The .match()function uses Regex. Regex is used to detect parts of strings. The \ddetects any digits. The +matches the previous selector 1 or more times. In other words, the number can be a multi digit number. And the $means it has to be at the end.
该.match()函数使用正则表达式。正则表达式用于检测字符串的一部分。在\d检测到任何数字。在+前面的选择1次或多次匹配。换言之，该号码可以是多位号码。而$它的手段在年底。
So then the jQuery uses that in the border-radiusproperty later. All you have to do is append px, and you are good to go.
因此，jQueryborder-radius稍后会在属性中使用它。您所要做的就是 append px，您就可以开始了。
回答by sanntu
You can use multiclassing on the element. Eg.:
您可以在元素上使用多类。例如。：
HTML:
HTML：
<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>
CSS:
CSS：
.round {
border: 1px solid #000;
width: 100px;
height: 100px;
}
.round.rounded-5 {
border-radius: 5px;
}
.round.rounded-10 {
border-radius: 10px;
}
回答by apaul
You could do something similar but not exactly the way you've put it.
你可以做一些类似的事情，但不完全是你说的那样。
CSS
CSS
.radius{
border-radius: 10px;
border: 1px solid red;
}
.r5{
border-radius:5px;
}
HTML
HTML
<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>
In the example above the red border will be retained but the border-radius will change.
在上面的例子中，红色边框将被保留，但边框半径将改变。
Note that you don't start class names with numbers, hence r5rather than 5
请注意，您不以数字开头类名，因此r5而不是5
回答by Oki Erie Rinaldi
you can do this. but you have to create the css in the html document(not linked, but between the <style>tag). you can use php or javascript to make a loop. for example try this:
你可以这样做。但是您必须在 html 文档中创建 css（不是链接，而是在<style>标签之间）。您可以使用 php 或 javascript 进行循环。例如试试这个：
<style>
<?php
$round = 5;
for ($round = 50; $round <= 150; $round+=25){
echo "#round$round{
height: 300px;
width: 300px;
background: #f00;
border-radius : ".$round."px;
margin: 2px;
}
";
}
?>
</style>
<?php
for ($round=50;$round<=150; $round+=25){
echo "<div id='round$round'>
</div>
";
}
?>
hope this helps! :D
希望这可以帮助！:D
回答by Bariq Dharmawan
Maybe what you want is like this
也许你想要的是这样
CSS
CSS
.round {
border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
border-radius: 5px;
}
.round.ten {
border-radius: 10px;
}
HTML
HTML
<div class="round five">something</div>
回答by limitlessloop
You can do what you are saying but you would have to reserve the keyword "round" for only this purpose. If you look at the following.
您可以按照您所说的去做，但您必须为此目的保留关键字“round”。如果你看下面的话。
div[class*="round"] {
background-color: green;
color: white;
padding: 10px;
}
And then targeting specific variants of it using...
然后使用...
div[class="round5"] {
border-radius: 5px;
}
The first block of code selects all class names which contain the word round, this can be both a good thing and a bad thing.
第一个代码块选择所有包含单词 round 的类名，这可能是好事也可能是坏事。
