Назначить CSS var () для стилизации значения свойства другого элемента CSS с помощью чистого CSS? - PullRequest
Новая
       31

Назначить CSS var () для стилизации значения свойства другого элемента CSS с помощью чистого CSS?

0 голосов
/ 10 января 2019

Предполагается, что у меня есть элемент #banner с font-size: 36px;, как показано в фрагменте кода ниже: 

#banner {
    font-size: 36px;
    width: 100%;
    background-color: red;
    text-align: center;
}
<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>

Как я могу извлечь это 36px из #banner's css свойство font-size и присвоить его css переменной , чтобы я мог использовать Функция calc () для динамической установки font-size другого элемента, скажем, от #someOtherBanner до #banner's font-size значения, деленного на, скажем, 3, таким образом возвращая 12px.

Фиктивное представление того, что я ищу, можно увидеть в фрагменте кода ниже: 

:root {
  --bannerFontSize: #banner.font-size;
}

#banner {
    font-size: 36px;
    width: 100%;
    background-color: red;
    text-align: center;
}
#someOtherBanner {
    font-size: calc(var(--bannerFontSize) / 3); // should return 12px
    width: 100%;
    background-color: green;
    text-align: center;
}
<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>
<hr />
<div id="someOtherBanner">
  <h1>Hello from me too, StackOverflow!!</h1>
</div>

Самая близкая вещь, которую я нашел, могла бы помочь, это CSS attr () функция, которая извлекает значение атрибута из элементов HTML (это можно использовать для установки свойств css элементов в атрибут при одновременной установке css переменные к значению атрибута), но согласно CanIUse.com он пока не совместим ни с одним браузером.

Это было бы просто, используя препроцессоры JavaScript или css, такие как SCSS, но каков подход Vanilla CSS для этого?

1 Ответ

0 голосов
/ 10 января 2019

Одна вещь, которую вы могли бы сделать, это просто использовать ту же переменную CSS, что и и font-size в баннере и padding во вторичном баннере.

Это будет выглядеть так: 

:root {
  --bannerFontSize: 36px;
}

#banner {
  font-size: var(--bannerFontSize);
  width: 100%;
  background-color: red;
  text-align: center;
}

#someOtherBanner {
  padding: calc(var(--bannerFontSize) / 3);
  width: 100%;
  background-color: green;
  text-align: center;
}
<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>
<hr />
<div id="someOtherBanner">
  <h1>Hello from me too, StackOverflow!!</h1>
</div>

Обратите внимание, что в вашем примере у вас есть деление на / 3px, тогда как вы хотите / 3.

...