Bagaimanakah saya boleh mengubah suai Nilai Lembaran Gaya CSS dengan JavaScript?

Mengakses dan Mengubah Suai Gaya CSS dengan JavaScript

Apabila mengubah suai gaya CSS menggunakan JavaScript, adalah penting untuk menyasarkan elemen dan nilai yang betul. Nilai CSS sebaris boleh ditukar dengan mudah, tetapi mendapatkan dan mengubah suai nilai yang ditakrifkan dalam lembaran gaya boleh mencabar.

Mengakses Nilai Lembaran Gaya CSS

Untuk mengakses nilai lembaran gaya CSS diberi id, ikut langkah berikut:

1. Dapatkan semula semua helaian gaya menggunakan document.styleSheets.
2. Tentukan helaian gaya yang diingini berdasarkan sifat hrefnya.
3. Dapatkan susunan peraturan (cth., cssRules dalam kebanyakan penyemak imbas, peraturan dalam IE).
4. Kenal pasti peraturan khusus menggunakan sifat selectorTextnya.

Mengubah suai Nilai Lembaran Gaya CSS

Setelah peraturan yang diingini dikenal pasti, anda boleh mengubah suainya:

1. Tetapkan sifat selectorText untuk menukar pemilih (cth., daripada #tId kepada #newId).
2. Tetapkan sifat nilai untuk menukar nilai CSS (cth., daripada lebar: 50% kepada lebar: 30%).

Contoh

Dalam senario yang disediakan:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Anda boleh menggunakan JavaScript berikut untuk mengubah suai sifat lebar dalam lembaran gaya:

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

Ini akan mengemas kini peraturan lembaran gaya kepada:

#tId {
      width: 30%;
   }

Ambil perhatian bahawa gaya sebaris masih diutamakan daripada nilai helaian gaya. Untuk mengatasi gaya sebaris, gunakan document.getElementById('id').style.width = value.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah suai Nilai Lembaran Gaya CSS dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!