Передать значение из HTML в CSS - PullRequest
Новая
       27

Передать значение из HTML в CSS

0 голосов
/ 26 апреля 2018

Мне было интересно, могу ли я передать значение классу css из html? Как это Пример: 

<div class="mt(5)"> Some text </div>
style {
 .mt(@mpx) {
   margin-top: @mpx px;
 }
}

Я слышал, что такой способ возможен в Меньше

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Нет, так, как вы хотите, невозможно ни в CSS, ни в любом из его надмножеств (например, Less и другие).Это всегда HTML, который использует значения из CSS, а не наоборот.Таким образом, вам понадобятся некоторые скрипты для того, что вам нужно.

Вы можете однако передать значения из HTML в CSS через Пользовательские свойства , используя встроенные стили: 

.c {color:  var(--c)}
.m {margin: var(--m)}
<div class="c" style="--c: blue" >Foo</div>
<div class="m" style="--m: 0 2em">Bar</div>
<div class="c" style="--c: green">Baz</div>

Или даже так: 

* {
    color:  var(--c);
    margin: var(--m);
    /* etc. */
}
<div style="--c: blue" >Foo</div>
<div style="--m: 0 2em">Bar</div>
<div style="--c: green">Baz</div>

Но этот метод ничем не отличается отличается от стилей простым ванильным методом, то есть: 

<div style="color: blue"> 
... etc.

По сути, он такой же уродливый и не подлежащий ремонту.

0 голосов
/ 26 апреля 2018

Вот способ сделать это без использования МЕНЬШЕ.

Вы можете использовать переменные CSS: 

// When clicking on the first div, padding is gonna grow up.
document.getElementById("div1").onclick = function(){
  var nb = parseInt(this.style.getPropertyValue("--nb"));
  this.style.setProperty("--nb", nb + 1);
}
.bg_colored {
  background-color: var(--bg);
}

div {
  padding: calc(var(--nb)*5px);
}
<div id="div1" class="bg_colored" style="--bg: yellow; --nb: 1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bg_colored" style="--bg: #f66; --nb: 2;">Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>

В моем фрагменте переменные CSS объявлены в атрибуте style элементов HTML.
Обратите внимание, что имена переменных должны начинаться с -- и чувствительны к регистру.
Затем CSS использует эти переменные для применения правильных стилей.

Эти значения переменных применяются к элементу и его дочерним элементам.
Чтобы использовать его глобально, вы можете объявить его в теге body.

Вот ссылка с некоторыми примерами: https://www.w3schools.com/css/css3_variables.asp

...