Получить вычисленное значение переменной CSS, в которой используется выражение типа calc - PullRequest
Новая
       24

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

2 голосов
/ 21 мая 2019

В JavaScript вы можете получить значение переменной CSS, используя getPropertyValue(property).Эта функция полезна для извлечения переменных, объявленных в блоке :root. 

:root {
    --example-var: 50px;
}

Однако, если это выражение переменной содержит функцию, подобную calc, вызов getPropertyValue возвращает выражение в виде текста, а невычисляя его, даже при использовании getComputedStyle. 

:root {
    --example-var: calc(100px - 5px);
}

Как получить вычисленное значение переменной CSS, которая использует функцию CSS, такую ​​как calc?

См. Пример ниже: 

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
:root {
  --example-var: calc(100px - 5px);
}
<div id='example'></div>

Ответы [ 3 ]

3 голосов
/ 21 мая 2019

Технически вы не можете, потому что вычисленное значение не является статическим и будет зависеть от других свойств.В этом случае это тривиально, так как мы имеем дело со значением пикселя, но представьте себе случай, когда у вас будет процентное значение.Процент относится к другим свойствам, поэтому мы не можем вычислить его, пока он не будет использован с var().Та же логика, если мы используем такие единицы, как em, ch и т. Д.

. Вот простой пример для иллюстрации: 

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
console.log(window.getComputedStyle(div).getPropertyValue('font-size'))
console.log(window.getComputedStyle(div).getPropertyValue('width'))
console.log(window.getComputedStyle(div).getPropertyValue('background-size'));
:root {
  --example-var: calc(100% + 5px - 10px);
}
#example {
  font-size:var(--example-var);
  width:var(--example-var);
  background-size:var(--example-var);
}
<div id='example'>some text</div>

Важно отметить последний случай, когда background-size имеет особое поведение при комбинировании процентного значения и значения в пикселях.Вы можете ясно видеть, что браузер не будет даже вычислять 5px - 10px и будет делать это только тогда, когда после использования var().

Если вы знаете, что calc() будет использоваться только сзначения пикселей, вы можете просто применить его к любому свойству и прочитать его.Это будет работать, так как вычисленное значение всегда будет оцениваться одинаково, в зависимости от того, какое свойство имеет: 

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
console.log(window.getComputedStyle(div).getPropertyValue('font-size'))
console.log(window.getComputedStyle(div).getPropertyValue('width'))
console.log(window.getComputedStyle(div).getPropertyValue('background-size'));
console.log(window.getComputedStyle(div).getPropertyValue('background-color'));
:root {
  --example-var: calc(100px - 10px);
  --test:var(--example-var)
}
#example {
  font-size:var(--example-var);
  width:var(--example-var);
  background-size:var(--example-var);
  background-color:var(--example-var);
}
<div id='example'></div>

Конечно, вам нужно учитывать свойство, которое ожидает значение в пикселях, иначе у вас будет недопустимое значение (как в случае с фоном впредыдущий пример).

1 голос
/ 21 мая 2019

Хорошо, этот дурацкий способ это добавить: 


:root {
  --example-var: calc(100px - 5px);
}

#var-calculator {
    // can be fetched through .getBoundingClientRect().width
    width: var(--example-var); 

    // rest of these just to make sure this element
    // does not interfere with your page design.
    opacity: 0;
    position: fixed;
    z-index: -1000;
}



 <custom-element>
  <div id="var-calculator"></div>
</custom-element>



const width = document.getElementById('var-calculator').getBoundingClientRect().width

Я не знаю, применимо ли это для вашего варианта использования, но я только что проверил его, и оно работает.

1 голос
/ 21 мая 2019

Значение будет вычислено при назначении (в том числе программно) некоторому реальному свойству: 

const div = document.getElementById('example');
div.style.width = 'var(--example-var)';
console.log(window.getComputedStyle(div).getPropertyValue('width'));
:root {
  --example-var: calc(100px - 5px);
}
<div id='example'></div>
...