如何将参数传递给css类

Question

我想知道是否可以通过以下方式为 css 添加一些灵活性：

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

其中.round 是一个带有圆角的类，“5”决定了半径的大小。可能吗？我看过一些地方，但我不知道如何实现。

Answer 1

对于 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 不会影响另一个元素。相当爵士吧！

Answer 2

也许你想要的是这样的

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>

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

Answer 4

您可以按照您所说的去做，但您必须为此目的保留关键字“round”。如果你看下面的话。

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

然后使用...定位它的特定变体

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

第一段代码选择所有包含轮子的类名，这可能是好事也可能是坏事。

Answer 5

你可以这样做。但您必须在 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

Answer 6

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

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;
}

Answer 7

你可以做类似的事情，但不完全按照你说的方式。

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>

Working Example

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

请注意，类名不能以数字开头，因此是r5 而不是5

Answer 8

您不能将边框半径与其值分开定义，因为它是一个属性。没有办法告诉元素“一般”具有圆角而不指定圆角的多少。

但是，您可以使用多个类和不同的属性来做一些类似的事情：

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