Bagaimanakah JavaScript Boleh Mengakses Sifat CSS Elemen HTML?

Pengeluaran Harta CSS dengan JavaScript

Mengakses sifat CSS unsur HTML melalui JavaScript ialah kemahiran penting untuk pembangunan web dinamik. Pertimbangkan senario di mana helaian gaya luaran, seperti "style.css," dipautkan ke halaman web. Untuk memanipulasi sifat CSS tertentu, adalah perlu untuk mendapatkan semula nilainya menggunakan JavaScript.

Pilihan untuk Membaca Sifat CSS

Terdapat dua kaedah utama untuk mencapainya:

1. Akses Objek Gaya Langsung: Dalam penyemak imbas moden, mengakses objek document.styleSheets menyediakan senarai komprehensif semua peraturan gaya yang digunakan pada dokumen. Dengan menghuraikan objek ini, adalah mungkin untuk mencari dan mengekstrak sifat individu. Walau bagaimanapun, kaedah ini tidak disyorkan kerana kerumitan dan pengehadannya.
2. Kaedah GetComputedStyle: Pendekatan yang lebih serba boleh melibatkan mencipta elemen dengan konfigurasi gaya yang diingini, menggunakan kaedah createElement(). Dengan menggunakan kaedah getComputedStyle() atau currentStyle (IE) pada elemen ini, nilai sifat CSS tertentu boleh diperolehi.

Contoh: Mengekstrak Sifat Warna

Pertimbangkan coretan kod berikut:

<code class="javascript">function getStyleProp(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    } else if (elem.currentStyle) {
        return elem.currentStyle[prop]; // IE
    }
}

window.onload = function () {
    var d = document.createElement("div"); // Create div
    d.className = "layout";                // Set class = "layout"
    alert(getStyleProp(d, "color"));       // Get property value
};</code>

Fungsi ini mengambil dua parameter: elemen yang disasarkan dan sifat CSS yang dikehendaki (cth., "warna"). Dengan mencipta elemen div sementara dengan gaya yang sama seperti elemen sasaran, kod mengekstrak dan mengembalikan nilai sifat yang ditentukan.

Teknik Lanjutan

Untuk mendapatkan semula sifat gaya yang kecualikan gaya sebaris, fungsi getNonInlineStyle() boleh digunakan:

<code class="javascript">function getNonInlineStyle(elem, prop) {
    var style = elem.cssText; // Cache the inline style
    elem.cssText = "";        // Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); // Get inherited value
    elem.cssText = style;     // Add the inline style back
    return inheritedPropValue;
}</code>

Dengan memadamkan sementara gaya sebaris, fungsi ini mendedahkan nilai sifat yang diwarisi daripada helaian gaya.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Mengakses Sifat CSS Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!