Dapatkan nilai pengiraan pembolehubah CSS menggunakan ungkapan seperti calc

Question

Dalam JavaScript, anda boleh menggunakan getPropertyValue(property) 获取 CSS 变量的值。此函数对于检索 :root pembolehubah yang diisytiharkan dalam blok sebagai berguna.

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

Tetapi ini juga benar jika ungkapan berubah ini mengandungi sesuatu seperti calc 的函数，则 getPropertyValue 调用将以文本形式返回表达式而不是计算它，即使使用 getCompulatedStyle.

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

Bagaimana untuk mendapatkan nilai pengiraan pembolehubah CSS menggunakan fungsi CSS seperti calc?

Lihat contoh di bawah:

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))

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

<div id='example'></div>

Answer 1

Cara pelik ialah menambah

: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

Saya tidak tahu sama ada ini akan berfungsi untuk kes penggunaan anda, tetapi saya baru sahaja mengujinya dan ia berfungsi.

Answer 2

Secara teknikal anda tidak boleh, kerana nilai yang dikira tidak statik dan akan bergantung pada sifat lain. Dalam kes ini, ia adalah mudah kerana kita berurusan dengan nilai piksel, tetapi bayangkan situasi di mana anda akan mempunyai nilai peratusan. Peratusan adalah relatif kepada atribut lain, jadi dalam unit seperti var() 一起使用之前我们无法计算它。如果我们使用 em、ch, logiknya adalah sama

Berikut ialah contoh mudah untuk menggambarkan:

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>