Bagaimana untuk menukar css secara dinamik

CSS yang berubah secara dinamik

Dengan perkembangan teknologi web, halaman web menjadi semakin kompleks Kami berharap elemen pada halaman boleh berubah secara dinamik untuk memenuhi keperluan pengguna yang berbeza. Antaranya, menukar CSS secara dinamik ialah kaedah teknikal biasa yang boleh mencapai kesan dinamik pada halaman Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menukar CSS secara dinamik.

1. Pengenalan kepada CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya halaman web. Ia membolehkan kami mengawal gaya elemen HTML. Sebagai contoh, anda boleh menetapkan warna latar belakang, fon, ketinggian, lebar, dsb. elemen.

Gaya CSS boleh ditakrifkan dalam dua cara berikut:

1 helaian gaya dalaman: ditakrifkan dengan menggunakan teg

2. Helaian gaya luaran: ditakrifkan dengan memautkan teg dalam dokumen HTML ke fail CSS.

Peraturan gaya CSS terdiri daripada pemilih dan pengisytiharan, seperti yang ditunjukkan di bawah:

选择器 {
    声明1;
    声明2;
    声明3;
    ...
}

Antaranya, pemilih digunakan untuk mencari elemen pada halaman, dan pengisytiharan digunakan untuk menetapkan gaya elemen. Sebagai contoh, kod berikut akan menetapkan warna fon semua elemen p kepada merah:

p {
    color: red;
}

2 JavaScript menukar CSS

Melalui JavaScript, kami boleh menukar gaya CSS secara dinamik selepas halaman dimuatkan, untuk Mencapai beberapa kesan yang lebih menarik. Contohnya, biarkan bar navigasi bertukar kepada kedudukan tetap apabila halaman menatal ke kedudukan tertentu. Berikut ialah contoh:

window.addEventListener('scroll', function() {
    var nav = document.querySelector('nav');
    if (window.pageYOffset > 100) {
        nav.style.position = 'fixed';
        nav.style.top = '0';
    } else {
        nav.style.position = 'relative';
        nav.style.top = '';
    }
});

Kod ini menukar gaya bar navigasi apabila kedudukan tatal dokumen melebihi 100 piksel. Secara khusus, ia menetapkan sifat kedudukan bar navigasi kepada tetap untuk memastikannya tetap di bahagian atas skrin dan menetapkan sifat teratasnya kepada 0 untuk menjauhkannya 0 dari bahagian atas halaman. Apabila kedudukan tatal dokumen kurang daripada 100 piksel, sifat kedudukan bar navigasi akan ditetapkan kepada relatif dan dipulihkan kepada keadaan lalai.

Sudah tentu, ini hanyalah contoh mudah. Dalam aplikasi praktikal, kami boleh menggabungkan API JavaScript lain dan gaya CSS3 untuk mencapai kesan yang lebih kompleks.

3. JavaScript mengendalikan sifat CSS

Dalam JavaScript, kita boleh mendapatkan dan menetapkan gaya CSS sesuatu elemen melalui atribut gaya. Sebagai contoh, kod berikut akan menetapkan warna latar belakang dan saiz fon elemen:

var elem = document.querySelector('#foo');
elem.style.backgroundColor = 'red';
elem.style.fontSize = '16px';

Di sini, kita mula-mula mendapatkan elemen dengan ID foo melalui kaedah document.querySelector() dan kemudian gunakan objek elem.style untuk menetapkan gaya .

Jika anda ingin mendapatkan gaya elemen, anda boleh menggunakan kaedah getComputedStyle(). Sebagai contoh, kod berikut akan mendapat saiz fon elemen:

var elem = document.querySelector('#foo');
var style = window.getComputedStyle(elem);
var fontSize = style.getPropertyValue('font-size');

Di sini, kita mula-mula mendapatkan elemen dengan ID foo, dan kemudian gunakan kaedah window.getComputedStyle() untuk mendapatkan gaya unsur tersebut. Ambil perhatian bahawa gaya di sini ialah gaya yang dikira, iaitu gaya akhir elemen. Akhir sekali, kami mendapat saiz fon yang dikira menggunakan kaedah getPropertyValue().

Ringkasnya, JavaScript boleh mengendalikan gaya CSS dengan sangat mudah, dan pembangun boleh menggunakan JavaScript untuk mencapai kesan gaya yang lebih fleksibel dan boleh diubah.

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