JavaScript mengubah suai css luaran

JavaScript ialah bahasa pengaturcaraan yang berkuasa dengan pelbagai aplikasi. Dalam pembangunan web, JavaScript sering digunakan untuk mengubah suai tingkah laku dan gaya halaman. Dalam artikel ini, kami akan memberi tumpuan kepada cara mengubah suai CSS luaran menggunakan JavaScript.

Pertama, mari kita fahami apa itu CSS luaran. Biasanya, helaian gaya CSS tapak web disimpan dalam fail berasingan, yang menjadikan fail HTML lebih ringkas dan lebih mudah untuk diselenggara. Fail CSS ini dirujuk dalam fail HTML seperti berikut:

<link href="style.css" rel="stylesheet" type="text/css">

Kod di atas akan memperkenalkan fail style.css ke dalam halaman HTML sebagai helaian gaya CSS luaran.

Jadi, bagaimana untuk menggunakan JavaScript untuk mengendalikan fail CSS luaran ini? Di bawah adalah dua kaedah utama.

1 Gunakan JavaScript untuk mengubah suai atribut href bagi teg pautan

Kami boleh mendapatkan teg pautan melalui JavaScript dan mengubah suai atribut href untuk menukar helaian gaya.

Pertama, cara untuk mendapatkan teg pautan boleh dicapai melalui kod berikut:

var links = document.getElementsByTagName('link');

Kemudian, kita boleh merentasi semua teg pautan dan mencari yang ingin kita ubah:

for (var i = 0; i < links.length; i++) {
  if (links[i].getAttribute('href').indexOf('style.css')!=-1) {
    links[i].setAttribute('href', 'new-style.css');
  }
}

Dalam kod di atas, kami mula-mula menggunakan gelung untuk merentasi semua teg pautan dan menentukan sama ada pautan helaian gaya yang ingin kami ubah suai. Jika ya, kami menggunakan kaedah setAttribute untuk mengubah suai atribut hrefnya kepada pautan baharu, dengan itu menukar helaian gaya.

2. Ubah suai secara langsung peraturan CSS helaian gaya

Kaedah kedua ialah mengubah suai secara langsung peraturan CSS helaian gaya. Dalam kaedah ini, kita perlu mendapatkan objek helaian gaya dahulu, dan kemudian mengubah suai peraturan CSS untuk mencapai kesan menukar gaya.

Kita boleh menggunakan document.styleSheets untuk mendapatkan semua objek lembaran gaya pada halaman. Kami kemudiannya boleh menggunakan kaedah insertRule atau deleteRule untuk menambah atau mengalih keluar peraturan CSS, dengan itu mengubah suai gaya halaman.

var styleSheet = document.styleSheets[0];  // 获取第一个样式表对象
styleSheet.insertRule('body { background-color: #f5f5f5; }', 0); // 添加一个新的 CSS 规则
styleSheet.deleteRule(0);  // 删除第一个 CSS 规则

Dalam kod di atas, kita mula-mula mendapat objek helaian gaya pertama, dan kemudian gunakan kaedah insertRule untuk menambah peraturan CSS baharu, yang menukar warna latar belakang body kepada #f5f5f5. Seterusnya, kami memadamkan peraturan CSS pertama menggunakan kaedah deleteRule.

Ringkasan

Melalui dua kaedah di atas, kami boleh menggunakan JavaScript dengan mudah untuk mengubah suai helaian gaya CSS luaran, dengan itu menukar gaya halaman. Sudah tentu, ini hanyalah pengenalan ringkas kepada manipulasi helaian gaya JavaScript Sebenarnya, JavaScript mempunyai lebih banyak kaedah dan kaedah manipulasi CSS yang tersedia untuk digunakan.

Tidak kira kaedah yang digunakan, kami perlu menjalankan ujian dan pengesahan yang mencukupi untuk memastikan pengubahsuaian helaian gaya boleh berkuat kuasa dengan lancar dan tidak akan menjejaskan gaya lain. Pada masa yang sama, kita juga mesti memberi perhatian kepada isu keserasian Pelayar yang berbeza mempunyai tahap sokongan dan kaedah yang berbeza untuk helaian gaya operasi JavaScript.

Dalam amalan, cara memilih kaedah yang sesuai bergantung pada keperluan dan senario tertentu. Kita perlu tentukan kaedah mana yang lebih sesuai berdasarkan situasi sebenar.

Atas ialah kandungan terperinci JavaScript mengubah suai css luaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!