Bagaimana untuk Mengambil Sifat CSS Elemen Halaman Web Menggunakan 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

1. Buat elemen dengan sifat yang sama seperti yang diminati (cth., < ;div> dengan nama kelas "susun atur").
2. 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>

Pilihan 2: Menghuraikan Objek Document.styleSheets Secara Manual

1. Akses objek document.styleSheets , yang mengandungi tatasusunan semua helaian gaya yang dipautkan kepada dokumen.
2. 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>

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!

JavaScript css Array Object while include require using class Property function this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn