Dapatkan nilai pengiraan pembolehubah CSS menggunakan ungkapan seperti calc-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Dapatkan nilai pengiraan pembolehubah CSS menggunakan ungkapan seperti calc

P粉111627787 2023-10-25 09:39:36

863

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

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

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

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

Bagaimana untuk mendapatkan nilai pengiraan pembolehubah CSS menggunakan fungsi CSS seperticalc?

Lihat contoh di bawah:

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

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

P粉111627787

membalas semua (2)

P粉9365096352023-10-26 00:55:18 Tingkat 2

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; }

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.

Suka+1

Tambah Balasan

P粉8385635232023-10-26 00:31:35 Tingkat 1

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 sepertivar()一起使用之前我们无法计算它。如果我们使用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); }