Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengakses Gaya Dikira dengan JavaScript Apabila Gaya Sebaris Mengatasi Tetapan Helaian Gaya Induk?

Bagaimana untuk Mengakses Gaya Dikira dengan JavaScript Apabila Gaya Sebaris Mengatasi Tetapan Helaian Gaya Induk?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-06 17:05:02889semak imbas

How to Access Computed Styles with JavaScript When Inline Styles Override Master Stylesheet Settings?

Mengakses Gaya daripada Lembaran Gaya Induk dengan JavaScript

Apabila menetapkan sifat paparan sesuatu div kepada "tiada" dalam helaian gaya induk dan cuba untuk aksesnya melalui JavaScript menggunakan myDiv.style.display, anda mungkin menghadapi nilai pulangan kosong. Ini kerana terdapat perbezaan antara gaya sebaris dan gaya terkira.

Gaya sebaris ditetapkan terus pada elemen HTML itu sendiri, manakala gaya terkira ialah gabungan semua gaya yang digunakan pada elemen, termasuk yang ditetapkan dalam helaian gaya luaran atau elemen induk. Apabila gaya sebaris hadir, ia akan mengatasi mana-mana gaya pengiraan yang bercanggah.

Apabila anda mengakses sifat gaya sesuatu elemen melalui JavaScript, anda hanya boleh membaca gaya sebaris. Oleh itu, jika anda menetapkan sifat paparan kepada "tiada" dalam helaian gaya induk tetapi mempunyai gaya sebaris yang mengatasinya, myDiv.style.display akan mengembalikan rentetan kosong.

Untuk mengakses gaya yang dikira, anda perlu untuk menggunakan fungsi getComputedStyle(). Fungsi ini mengembalikan objek yang mengandungi semua gaya yang dikira untuk elemen, termasuk yang ditetapkan dalam helaian gaya luaran atau elemen induk.

Berikut ialah contoh cara menggunakan getComputedStyle() untuk mendapatkan semula sifat paparan yang dikira:

var display = getComputedStyle(myDiv).display;

Dengan menggunakan getComputedStyle(), anda boleh mengakses gaya pengiraan sesuatu elemen, walaupun ia telah ditindih oleh gaya sebaris.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Gaya Dikira dengan JavaScript Apabila Gaya Sebaris Mengatasi Tetapan Helaian Gaya Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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