js padam css

JavaScript ialah bahagian penting dalam pembangunan bahagian hadapan. Ia bukan sahaja boleh menukar mod paparan elemen HTML, tetapi juga mengawal penggunaan helaian gaya CSS. Dalam artikel ini, kami akan memperkenalkan cara mengalih keluar gaya CSS menggunakan JavaScript.

Helaian gaya CSS boleh menyediakan pelbagai gaya reka bentuk yang berbeza untuk tapak web, dan boleh dilaraskan secara dinamik mengikut keperluan halaman yang berbeza. Kadangkala kami ingin menggunakan JavaScript untuk menambah atau memadam beberapa peraturan gaya CSS secara dinamik untuk memenuhi keperluan reka bentuk yang berbeza.

Dalam JavaScript, anda boleh menggunakan sifat document.styleSheets untuk mengakses semua helaian gaya CSS untuk halaman semasa. Sifat ini mengembalikan tatasusunan objek CSSStyleSheet, setiap objek dalam tatasusunan mewakili helaian gaya.

Sebagai contoh, kita boleh menggunakan kod berikut untuk mendapatkan objek stylesheet pertama:

var styleSheet = document.styleSheets[0];

Seterusnya, kita boleh menggunakan sifat cssRules objek stylesheet untuk mengakses semua peraturan lembaran gaya itu ( peraturan). Sifat ini mengembalikan objek CSSRuleList yang mewakili semua peraturan dalam helaian gaya.

Sebagai contoh, kita boleh menggunakan kod berikut untuk mendapatkan satu peraturan dalam objek helaian gaya pertama:

var rule = styleSheet.cssRules[0];

Kini, kami mempunyai akses kepada helaian gaya CSS dan peraturannya. Seterusnya, kami akan memperkenalkan cara menggunakan JavaScript untuk memadam peraturan CSS.

Memadamkan peraturan CSS menggunakan JavaScript

Dalam JavaScript, anda boleh menggunakan kaedah deleteRule() objek CSSStyleSheet untuk memadam satu peraturan CSS. Kaedah ini memerlukan satu parameter, iaitu nilai indeks peraturan untuk dipadamkan.

Sebagai contoh, kita boleh menggunakan kod berikut untuk memadam peraturan pertama dalam objek lembaran gaya pertama:

styleSheet.deleteRule(0);

Jika kita mahu memadamkan semua peraturan, kita boleh menggunakan gelung untuk memadam setiap satu pula Peraturan:

for (var i = styleSheet.cssRules.length - 1; i >= 0; i--) {
  styleSheet.deleteRule(i);
}

Dalam contoh di atas, kami menggunakan gelung terbalik untuk memastikan setiap peraturan dialih keluar dengan betul.

Alih keluar semua peraturan CSS menggunakan JavaScript

Kadangkala, kita perlu mengalih keluar semua peraturan daripada helaian gaya CSS. Untuk mencapai fungsi ini, kita boleh menggunakan sifat document.styleSheets bersama-sama dengan kaedah deleteRule() objek CSSStyleSheet.

Sebagai contoh, kod berikut akan memadamkan semua peraturan dalam semua helaian gaya CSS pada halaman semasa:

var styleSheets = document.styleSheets;
for (var j = 0; j < styleSheets.length; j++) {
  var styleSheet = styleSheets[j];
  for (var i = styleSheet.cssRules.length - 1; i >= 0; i--) {
    styleSheet.deleteRule(i);
  }
}

Dalam contoh di atas, kami menggunakan gelung luar untuk lelaran melalui setiap objek helaian gaya CSS; Dalam gelung dalaman, kami menggunakan kaedah deleteRule() untuk memadam semua peraturan dalam setiap helaian gaya.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara mengalih keluar peraturan CSS menggunakan JavaScript. Kita boleh menggunakan sifat document.styleSheets untuk mengakses semua helaian gaya CSS untuk halaman semasa, dan kemudian menggunakan kaedah deleteRule() objek CSSStyleSheet untuk memadam satu peraturan atau memadam semua peraturan. Dengan menguasai kemahiran ini, kami boleh mencapai kesan reka bentuk CSS dinamik dengan lebih baik, dengan itu membawa pengalaman visual yang lebih menarik ke halaman web kami.

Atas ialah kandungan terperinci js padam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!