js mengubah suai css secara dinamik

Dengan pembangunan berterusan teknologi bahagian hadapan, JavaScript telah menjadi bahagian yang amat diperlukan dalam pembangunan web. Dalam JavaScript, mengubah suai gaya CSS secara dinamik ialah salah satu keperluan biasa Ia boleh mencapai banyak kesan hebat, seperti kesan khas apabila tetikus melayang, dan warna bar navigasi berubah apabila halaman ditatal. Artikel ini akan memperkenalkan secara terperinci cara mengubah suai gaya CSS secara dinamik dalam JavaScript.

1. Gunakan JavaScript untuk mengubah suai gaya elemen

Dalam HTML, kami boleh mencantikkan halaman dengan menambahkan gaya CSS pada elemen. Dalam JavaScript, kesan gaya mengubah suai secara dinamik boleh dicapai dengan mengubah suai atribut unsur.

1. Menggunakan atribut gaya elemen

Kita boleh menggunakan atribut gaya elemen HTML untuk mengubah suai secara langsung gaya elemen. Kaedah ini sesuai untuk mengubah suai gaya elemen tunggal.

Kod sampel:

<div id="box" style="background-color: green;">我是一段文本</div>

Dalam JavaScript, anda boleh mengubah suai gaya elemen secara dinamik dengan mendapatkan atribut gayanya:

var box = document.querySelector('#box');
box.style.backgroundColor = 'red';

Selepas mengubah suai gayanya melalui JavaScript, gaya unsur akan bertukar menjadi merah.

2. Menggunakan elemen gaya elemen

Cara lain untuk mengubah suai gaya elemen secara dinamik ialah menggunakan elemen gaya elemen. Elemen gaya membolehkan kami mengakses terus helaian gaya elemen dalam JavaScript dan mengubah suai gayanya.

Kod contoh:

<div id="box"></div>

<style>
    #box {
        background-color: green;
    }
</style>

Dalam JavaScript, anda boleh mendapatkan elemen gaya elemen dengan mendapatkan atribut gayanya dan kemudian mengubah suai gayanya secara dinamik:

var box = document.querySelector('#box');
var styles = box.style;

// 修改样式
styles.backgroundColor = 'red';

Ubah suainya melalui JavaScript Selepas penggayaan, gaya elemen akan bertukar menjadi merah.

2. Gunakan classList untuk mengubah suai gaya

Dua kaedah yang diperkenalkan di atas sesuai untuk mengubah suai gaya satu elemen jika kita perlu mengawal gaya berbilang elemen pada halaman web sesuka hati, maka kedua-dua kaedah ini Kaedah ini kelihatan terlalu menyusahkan. Pada ketika ini, kita boleh menggunakan atribut classList untuk mengubah suai gaya secara dinamik.

1. Tambah dan padam kelas

Atribut classList mengandungi banyak kaedah mudah yang membolehkan kami menambah dan memadam kelas dengan mudah. Dengan kelas, kita boleh mentakrifkan satu set gaya untuk elemen dan menambah atau mengalih keluarnya secara dinamik melalui JavaScript.

Kod sampel:

<div class="box">我是一段文本</div>

Dalam JavaScript, anda boleh menambah atau mengalih keluar kelas untuk elemen melalui kaedah add() dan remove() classList:

var box = document.querySelector('.box');
box.classList.add('red');
box.classList.remove('box');

Diubah suai melalui JavaScript Selepas ia digayakan, gaya elemen akan bertukar menjadi merah dan kelas kotak elemen akan dipadamkan.

2. Togol kelas

Selain kaedah add() dan remove(), classList juga mempunyai kaedah mudah dipanggil toggle(). Kaedah toggle() boleh menukar kelas elemen Jika kelas sudah wujud dalam elemen, kaedah akan memadamkan kelas, jika tidak, ia akan menambah kelas.

Kod contoh:

<div class="box">我是一段文本</div>

Dalam JavaScript, anda boleh menukar kelas elemen melalui kaedah toggle() classList:

var box = document.querySelector('.box');
box.classList.toggle('red');
box.classList.toggle('green');

Selepas mengubah suai gayanya melalui JavaScript, gaya elemen akan berubah daripada merah kepada hijau.

3 Ubah suai secara langsung helaian gaya

Kaedah di atas boleh mengawal gaya satu elemen atau berbilang elemen, tetapi jika anda perlu mengubah suai secara langsung helaian gaya, anda perlu menggunakan kaedah yang berbeza.

Dalam JavaScript, helaian gaya diwakili sebagai objek, dan kami boleh mengubah suai gaya di dalamnya secara dinamik melalui kod JavaScript untuk mencapai pengubahsuaian dinamik helaian gaya.

Kod contoh:

<div class="box">我是一段文本</div>

Dalam JavaScript, anda boleh mengubah suai gayanya secara dinamik dengan mendapatkan objek yang sepadan dengan helaian gaya:

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;

for (var i = 0; i < rules.length; i++) {
    var rule = rules[i];
    if (rule.selectorText === '.box') {
        rule.style.backgroundColor = 'red';
    }
}

Selepas mengubah suai gayanya melalui JavaScript, elemen Gaya akan bertukar menjadi merah.

4. Ringkasan

Artikel ini memperkenalkan tiga kaedah mengubah suai gaya CSS secara dinamik, termasuk menggunakan atribut gaya elemen, menggunakan elemen gaya elemen dan menggunakan classList. Di samping itu, untuk memenuhi keperluan untuk mengubah suai secara langsung helaian gaya, kami juga memperkenalkan kaedah mengubah suai secara langsung helaian gaya. Kaedah ini membolehkan kami dengan mudah melaksanakan fungsi mengubah suai gaya CSS secara dinamik dalam JavaScript.

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