Bagaimanakah Saya Boleh Dapatkan Nilai Harta CSS dalam Unit Asalnya?

Mendapatkan Nilai Harta CSS Dalam Unit Asalnya

Apabila menentukan nilai sifat CSS elemen, pembangun sering bergantung pada kaedah seperti getComputedStyle atau css() jQuery. Walau bagaimanapun, kaedah ini mengembalikan nilai dalam piksel, yang boleh menimbulkan masalah jika nilai asalnya ditetapkan dalam unit lain (mis., peratusan, em atau px). Ini menimbulkan persoalan: bagaimanakah kita boleh mendapatkan nilai sifat CSS dalam unit asalnya, tanpa mengira unit yang ditetapkan dengannya?

Kepentingan Gaya Elemen dan Susunan

Kuncinya terletak pada mengambil kira gaya elemen dan susunan pemilih CSS. Gaya elemen mempunyai keutamaan tertinggi, jadi kita mulakan dengan menyemak sama ada nilai ditetapkan secara eksplisit dalam sifat gaya elemen. Jika ya, kami mendapatkan semula nilai dan keutamaannya.

Seterusnya, kami memeriksa peraturan CSS yang dipadankan menggunakan getMatchedCSSRules. Peraturan ini disusun mengikut keutamaan (terakhir tertinggi), dan kami mengulanginya. Jika mana-mana peraturan mempunyai keutamaan bukan nol, kami mengemas kini nilai. Walau bagaimanapun, jika peraturan mempunyai keutamaan yang penting, kami segera mengembalikan nilai tersebut.

Contoh Kod

Pertimbangkan HTML dan CSS berikut:

<div class="b">div 1</div>
<div>

Dan JavaScript berikut kod:

var d = document.querySelectorAll('div');

for (var i = 0; i < d.length; ++i) {
  console.log("div " + (i + 1) + ":  " + getMatchedStyle(d[i], 'width'));
}

Kod ini mengeluarkan lebar berikut untuk divs:

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Kesimpulan

Dengan mempertimbangkan kedua-dua gaya elemen dan susunan peraturan CSS yang dipadankan, fungsi getMatchedStyle tersuai ini mengambil semula nilai sifat CSS dalam unit asalnya dengan tepat. Pengetahuan ini penting untuk mengurus saiz dan dimensi elemen dengan tepat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Dapatkan Nilai Harta CSS dalam Unit Asalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!