perubahan dinamik css

Perubahan dinamik CSS ialah teknologi bahagian hadapan biasa, yang boleh mengubah penampilan halaman web dengan menukar gaya dalam helaian gaya CSS, menjadikan halaman web lebih meriah. Artikel ini akan memperkenalkan prinsip, kaedah pelaksanaan dan aplikasi praktikal perubahan dinamik CSS.

1. Prinsip

Dalam HTML, persembahan teks, imej, pautan dan elemen lain ditakrifkan oleh helaian gaya CSS. Helaian gaya CSS ialah gabungan sifat dan nilainya yang menentukan kesan paparan setiap elemen pada halaman web. Helaian gaya CSS terdiri daripada pemilih dan pengisytiharan Pemilih menentukan elemen HTML untuk gaya yang harus digunakan, dan pengisytiharan menerangkan cara elemen ini perlu dipaparkan.

Prinsip perubahan dinamik CSS sebenarnya sangat mudah, iaitu menukar rupa halaman web dengan mengubahsuai nilai atribut elemen yang ditentukan dalam helaian gaya CSS melalui JavaScript. Contohnya, tukar warna latar belakang, saiz fon, kedudukan, gaya sempadan, dsb. sesuatu elemen. Memandangkan JavaScript boleh mengendalikan Model Objek Dokumen (DOM) secara langsung, ia boleh mendapatkan maklumat nod dan nilai atribut dengan mudah bagi setiap elemen dalam halaman, dan maklumat ini ialah data asas yang diperlukan untuk menukar helaian gaya CSS.

2. Kaedah pelaksanaan

Menggunakan perubahan dinamik CSS dalam halaman HTML biasanya mempunyai kaedah pelaksanaan berikut:

1 Gunakan operasi atribut JS

Kaedah ini agak mudah, cuma ubah suai atribut gaya elemen secara terus melalui JS. Contohnya:

document.getElementById("myDiv").style.backgroundColor = "red";

Barisan kod ini menetapkan warna latar belakang elemen HTML dengan ID "myDiv" kepada merah.

2. Gunakan penukaran kelas CSS

Kaedah ini memerlukan penentuan berbilang kelas CSS terlebih dahulu, dan kemudian memilih kelas yang diperlukan dalam kod JS untuk menukar gaya elemen. Kaedah ini lebih jelas, tetapi memerlukan penciptaan berbilang kelas CSS tambahan. Contohnya:

takrif CSS:

.myClass {
background-color: yellow;
}

.myClass2 {
background-color: merah ;
}

Kod JS:

document.getElementById("myDiv").className = "myClass2";

Baris kod ini akan mempunyai ID "myDiv" Nama kelas elemen HTML ditukar daripada "myClass" kepada "myClass2", sekali gus menukar warna latar belakang.

3. Gunakan objek StyleSheet

Kaedah ini memerlukan mendapatkan objek style sheet, dan kemudian menukar gaya elemen dengan mengendalikan peraturan dalam style sheet. Kaedah ini lebih fleksibel, tetapi kodnya agak kompleks. Contohnya:

Takrif CSS:

.myClass {
warna latar belakang: kuning;
}

Kod JS:

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;
rules[0].style.backgroundColor = "red";

Kod ini diperoleh pertama Objek helaian gaya pertama, dan kemudian dapatkan peraturan koleksi peraturan gaya. Akhir sekali, tukar warna latar belakang peraturan pertama kepada merah melalui peraturan[0].style.backgroundColor.

3. Contoh aplikasi

1 Tukar warna latar belakang elemen

Kod berikut boleh digunakan untuk menukar warna latar belakang elemen kepada rawak apabila tetikus diletakkan pada elemen. Warna:

document.getElementById('myElement').addEventListener('mouseover', function () {

var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
this.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';

});

2 . Tukar warna teks

Kod berikut boleh digunakan untuk menukar warna teks dalam elemen yang ditentukan kepada merah, hijau dan biru secara bergilir apabila butang diklik:

warna var = ['merah', 'hijau', ' biru'];
var currentIndex = 0;
document.getElementById('myButton').addEventListener('klik', fungsi () {
dokumen. getElementById('myText').style.color = colors[currentIndex];
currentIndex++;
if (currentIndex == colors.length) {

  currentIndex = 0;

}
});

3. Tukar saiz imej

Anda boleh menggunakan kod berikut untuk menggandakan saiz imej apabila anda mengklik padanya:

document.getElementById('myImage').addEventListener ('klik', fungsi () {
var width = this.width * 2;
var height = this.height * 2;
this.style.width = width + 'px';
this.style.height = height + 'px ';
});

Tiga contoh di atas menunjukkan kaedah aplikasi asas perubahan dinamik CSS, dan lebih banyak kesan khas boleh dicapai dengan menukar atribut yang berbeza . Perlu diingat bahawa walaupun perubahan dinamik CSS boleh menjadikan halaman web lebih hidup dan menarik, ia mesti dikekalkan sederhana dan tidak mempunyai kesan negatif terhadap pengalaman pengguna.

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