如何将参数传递给css类
如何将参数传递给css类
提问于 2013-07-27 11:01:29
我想知道是否可以通过以下方式为css添加一些灵活性：
<div class='round5'></div>其中.round是具有圆角的类，'5‘确定半径的大小。有可能吗？我见过一些地方，但我不知道它是如何实现的。
回答 7
Stack Overflow用户
回答已采纳
发布于 2018-07-22 10:35:42
对于在2018年偶然发现这一点的任何人，whilst not fully supported 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>您还可以定义根变量并将它们传入
<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>这也被限定为元素的作用域。如果您在一个元素中设置了--radius，则不会影响另一个元素。很漂亮，对吧！
Stack Overflow用户
发布于 2013-07-27 11:11:05
您不能单独定义边界半径和它的值，因为它都是一个属性。在不指定圆角大小的情况下，无法告诉元素“一般”要有圆角。
但是，您可以对多个类和不同的属性执行类似的操作：
HTML：
<div class="rounded blue"></div>
<div class="rounded green"></div>CSS：
.rounded {
border-radius: 5px;
}
.blue {
background: blue;
}
.green {
background: green;
}.rounded类添加边框半径，.blue和.green类添加背景颜色。
(我喜欢对类进行命名和排序，以便它们读起来合乎逻辑，如<div class="large box"></div>等)。
Stack Overflow用户
发布于 2013-07-27 12:04:25
这是我想出的一个答案，它需要少量的jQuery和少量的正则表达式知识。
$(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>
.match()函数使用正则表达式。正则表达式用于检测字符串的某些部分。\d可以检测到任何数字。+与前一个选择器匹配1次或多次。换句话说，数字可以是多位数字。而$意味着它必须在末尾。
因此，稍后jQuery会在border-radius属性中使用它。您所要做的就是附加px，然后就可以运行了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17893823
复制相关文章
相似问题