Bagaimana untuk Mengambil Sifat CSS Elemen Halaman Web Menggunakan JavaScript?-tutorial css-php.cn

Bagaimana untuk Mengambil Sifat CSS Elemen Halaman Web Menggunakan JavaScript?

Susan Sarandon

Lepaskan： 2024-10-23 19:04:02

asal

742 orang telah melayarinya

How to Retrieve CSS Properties of Webpage Elements Using JavaScript?

Mendapatkan semula Sifat CSS Elemen Halaman Web Menggunakan JavaScript

Apabila fail CSS dipautkan ke halaman web, pembangun JavaScript mungkin menghadapi keperluan untuk membaca sifat unsur CSS tertentu.

Dalam senario ini, di mana halaman web mengandungi

elemen dengan nama kelas "susun atur", pembangun memerlukan penyelesaian untuk mendapatkan semula sifat khusus elemen ini menggunakan JavaScript. Walaupun pelbagai pendekatan tersedia, dua pilihan yang disyorkan termasuk:

Pilihan 1: Cipta dan Ubah Suai Elemen

Buat elemen dengan sifat yang sama seperti yang diminati (cth., < ;div> dengan nama kelas "susun atur").
Gunakan kaedah getComputedStyle untuk mendapatkan semula nilai sifat yang dikira. Kaedah ini menyediakan gaya yang terhasil selepas menggunakan semua peraturan CSS yang berkaitan.

<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");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

Salin selepas log masuk

Pilihan 2: Menghuraikan Objek Document.styleSheets Secara Manual

Akses objek document.styleSheets , yang mengandungi tatasusunan semua helaian gaya yang dipautkan kepada dokumen.
Gunakan kaedah getPropertyValue() pada setiap helaian gaya untuk mendapatkan semula nilai sifat khusus yang dikaitkan dengan pemilih yang dikehendaki.

Ini pilihan tidak disyorkan melainkan diperlukan secara khusus untuk mengumpulkan semua sifat CSS yang ditakrifkan oleh pemilih tertentu.

Selain itu, untuk mengabaikan takrifan gaya sebaris bagi elemen semasa, gunakan fungsi getNonInlineStyle():

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengambil Sifat CSS Elemen Halaman Web Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!