如何向CSS类传递参数

Question

我想知道是否可以通过这种方式为CSS添加一些灵活性:

<div class='round5'></div>

.round 是一个拥有圆角的 class，并且 '5' 决定了圆角的半径。这是否可能？我曾在某处看到过，但不知道实现是如何进行的。

- Mostafa Talebi

---

CSS类必须手动定义。 - mash

Answer 1

如果你在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>

你也可以定义根变量并将它们传入

<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，它不会影响另一个元素。非常棒，对吧！

- stwilz

---

有人知道这个能否与TypeStyle一起使用吗？ - Javiere

@Javiere 我认为你可能正在寻找的是主题化。我更熟悉styled-components中的这些概念，但你应该能够根据组件更改你的主题以使它们呈现不同的效果。你想要实现什么？ - stwilz

太棒了！我喜欢它！ - user4059321

正是我所需要的！简明扼要的解释。谢谢！ - rlinner

这可能导致内联CSS问题，当与配置良好的CSP头部一起使用时。 - mittal

Answer 2

因为边框半径是一个属性，所以您无法将其定义与值分开。没有办法告诉元素“一般”地拥有圆角而不指定圆角程度。

但是，您可以使用多个类和不同的属性来实现类似的效果：

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> 等）。

- daGUY

Answer 3

这里是我想到的一个答案，需要少量的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，就可以了。 Fiddle

- Cody Guldner

---

你能用这种方法，但给 DOM 写一个新的类名吗？例如 class="round round5" - limitlessloop

Answer 4

您可以在元素上使用多个类。例如：

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：

.round {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}

.round.rounded-5 {
    border-radius: 5px;
}

.round.rounded-10 {
    border-radius: 10px;
}

- sanntu

Answer 5

你可以做类似的事情，但不一定要按照你所说的方式。

CSS

.radius{
    border-radius: 10px;
    border: 1px solid red;
}

.r5{
    border-radius:5px;
}

HTML

<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>

工作示例

在上面的示例中，红色边框将保留，但边框半径会改变。

请注意，您不应以数字开头命名类名，因此使用r5而不是5

- apaul

Answer 6

也许您想要的是这样的效果

CSS

.round {
  border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
  border-radius: 5px;
}
.round.ten {
  border-radius: 10px;
}

HTML

<div class="round five">something</div>

- Bariq Dharmawan

Answer 7

你可以这样做。但是你需要在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>
            ";

}

?>

希望我的翻译可以帮助你！ :D

- Oki Erie Rinaldi

---

如果你想要使其动态化（不重新加载页面），你必须使用 JavaScript 来实现。 - Oki Erie Rinaldi

Answer 8

你所说的是可以实现的，但你需要将关键字“round”仅保留给此目的。如果你看下面的内容。

div[class*="round"] {
    background-color: green;
    color: white;
    padding: 10px;
}

然后针对特定变体使用...

div[class="round5"] {
    border-radius: 5px;
}

第一个代码块选择所有包含单词round的类名，这既有好处也有坏处。

- limitlessloop

---

这种做法可能可行，但是已经有更加简洁、不容易出现问题的方式列出了…… - user2366842

在正确的情况下，这个解决方案可能是正确或唯一的方法。 - limitlessloop

Answer 9

通过遵循@stwilz的解决方案并根据CSS var()函数的使用https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties，我能够像这样使用它。

.round{
    border-radius: var(--radius, 10px); 
    /* 10px as default value */
}

然后可以像这样使用

<div class="round">Hello</div>
<div class="round" style="--radius: 20px">Hello</div>

可以设置全局值，而不是默认值

:root{
    --radius: 30px;
}

- ganiular