Как передать параметры классам css

Ответ 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 в одном элементе, это не повлияет на другой элемент. Правильно, джазово!

Ответ 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> и т.д.).

Ответ 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>

Ответ 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;
}

Ответ 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

Ответ 6

вы можете это сделать. но вы должны создать css в html-документе (не связанный, но между тегом <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

Ответ 7

Может быть, то, что вы хотите, это как

CSS

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

HTML

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

Ответ 8

Вы можете делать то, что вы говорите, но вам нужно зарезервировать ключевое слово "round" только для этой цели. Если вы посмотрите на следующее.

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

И затем таргетинг на конкретные варианты его использования...

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

Первый блок кода выбирает все имена классов, которые содержат слово round, это может быть хорошей и плохой.