如何将参数传递给css类

Question

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

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

哪里.round是圆角的类,'5'确定半径的数量.可能吗？我已经看到了一些地方,但我不知道实施是如何进行的.

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一个元素是不会影响另一个元素.非常爵士吧!

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>,等等).

Answer 3

这是我提出的答案,需要少量的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>

该.match()功能使用Regex.正则表达式用于检测字符串的一部分.在\d检测到任何数字.在+1次以上的比赛之前的选择.换句话说,该数字可以是多位数.而$它的手段在年底.

那么jQuery border-radius稍后会在属性中使用它.所有你需要做的就是追加px,你很高兴.

小提琴

Answer 4

你可以做一些类似的事情，但不完全是你说的那样。

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

Answer 5

您可以在元素上使用多重分类.例如.:

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