Artikel ini akan menerangkan kaedah untuk menambah CSS dengan JavaScript.
Bagaimana untuk Menambah CSS Dengan JavaScript?
Dalam JavaScript, anda boleh menambah gaya CSS pada elemen dengan mengubah suai sifat gayanya menggunakan kaedah atau pendekatan berikut:
- gaya Harta sebagai penggayaan sebaris
- Kaedah setAttribute() sebagai penggayaan sebaris
- createElement() Kaedah sebagai penggayaan global
Kaedah 1: Tambah CSS Dengan JavaScript Menggunakan Harta 'gaya'.
Untuk menambah CSS dalam JavaScript, gunakan ' gaya ” harta benda. Ia digunakan untuk mengakses dan memanipulasi gaya sebaris elemen. Ia memberikan objek yang mewakili gaya sebaris elemen dan membolehkan seseorang mendapatkan atau menetapkan sifat gaya individu.
Sintaks
Untuk menambah gaya CSS dalam JavaScript, sintaks berikut digunakan untuk ' gaya ” harta:
unsur. gaya ;
Di sini, ' unsur ” ialah rujukan kepada elemen HTML.
Contoh
Dalam contoh berikut, kami akan menggayakan butang menggunakan JavaScript. Pertama, kami akan mencipta tiga butang dan memberikan id kepada mereka, yang membantu untuk mengakses elemen butang untuk penggayaan:
< id butang = 'btn2' > Tolak butang >
< id butang = 'btn3' > Terima butang >
Sebelum menggayakan output akan kelihatan seperti ini:
Sekarang, mari kita gayakan butang ini dalam JavaScript menggunakan ' gaya ” harta benda. Mula-mula, dapatkan semua elemen butang menggunakan id yang ditetapkan dengan bantuan ' getElementById() ' kaedah:
biar setuju = dokumen. getElementById ( 'btn1' ) ;biarkan menolak = dokumen. getElementById ( 'btn2' ) ;
biar terima = dokumen. getElementById ( 'btn3' ) ;
Tetapkan warna latar belakang semua butang ini menggunakan “ gaya ” harta:
setuju. gaya . warna latar belakang = 'hijau' ;menolak. gaya . warna latar belakang = 'merah' ;
terima. gaya . warna latar belakang = 'kuning' ;
Seperti yang anda lihat, butang telah berjaya digayakan menggunakan ' gaya ” harta:
Kaedah 2: Tambah CSS Dengan JavaScript Menggunakan Kaedah 'setAttribute()'.
Untuk menambah gaya CSS dalam JavaScript, gunakan ' setAttribute() ” kaedah. Ia digunakan untuk menetapkan atau menambah atribut dan nilainya pada elemen HTML.
Sintaks
Sintaks berikut digunakan untuk ' setAttribute() ' kaedah:
Contoh
Di sini, kami akan menetapkan gaya yang berbeza pada butang dalam JavaScript menggunakan ' setAttribute() ” kaedah. Tetapkan jejari sempadan semua butang kepada “ .5rem ”, dan warna teks “ Setuju ” dan “ Tolak butang ' ke ' putih ”.
menolak. setAttribute ( 'gaya' , 'warna latar belakang: merah; warna: putih; jejari sempadan: .5rem;' ) ;
terima. setAttribute ( 'gaya' , 'warna latar belakang: kuning; jejari sempadan: .5rem;' ) ;
Pengeluaran
Kaedah 3: Tambah CSS Dengan JavaScript Menggunakan Kaedah 'createElement()'.
Jika anda ingin membuat kelas atau id dalam penggayaan JavaScript seperti dalam penggayaan CSS, gunakan ' createElement() ” kaedah. Ia digunakan untuk mencipta elemen baharu secara dinamik. Untuk penggayaan buat ' gaya ” elemen menggunakan kaedah ini. ' createElement('style') ” kaedah dalam JavaScript digunakan untuk mencipta elemen gaya baharu secara dinamik, yang boleh digunakan untuk menambah gaya CSS pada halaman web.
Sintaks
Sintaks yang diberikan digunakan untuk ' createElement() ' kaedah:
Untuk menambah gaya CSS dalam JavaScript, gunakan sintaks yang diberikan:
const gaya = dokumen. createElement ( 'gaya' ) ;Kemudian tambahkan elemen gaya dalam teg kepala menggunakan sintaks di bawah:
dokumen. kepala . appendChild ( gaya ) ;Di sini, ' gaya ” ialah rujukan kepada elemen gaya yang baru dicipta, dan “ dokumen.kepala ” ialah elemen kepala dokumen HTML.
Contoh
Mula-mula, buat elemen gaya menggunakan ' createElement() ' kaedah:
Sekarang, buat ' btn kelas ' untuk menggunakan gaya yang sama pada semua butang dan id ' btn1 ”, “ btn2 ” dan “ btn3 ” untuk penggayaan butang individu:
gaya. innerHTML = `. btn {
fon - saiz : 1.1rem ;
padding : 3px ;
margin : 2px ;
fon - keluarga : tanpa - serif ;
sempadan - jejari : .5rem ;
}
#btn1 {
latar belakang - warna : hijau ;
warna : putih ;
}
#btn2 {
latar belakang - warna : merah ;
warna : putih ;
}
#btn3 {
latar belakang - warna : kuning ;
}
` ;
Sekarang, tambahkan elemen gaya pada kepala dokumen dengan menghantar sebagai parameter kepada “ appendChild() ' kaedah:
dokumen. kepala . appendChild ( gaya ) ; Pengeluaran
Itu sahaja tentang menambah CSS dalam JavaScript.
Kesimpulan
Untuk menambah CSS dengan JavaScript, gunakan penggayaan sebaris termasuk ' gaya 'Harta, dan' setAttribute() ' kaedah, atau penggayaan global menggunakan ' createElement() ” kaedah. Penggayaan global adalah lebih cekap manakala kaedah sebaris tidak disyorkan kerana ia menyukarkan untuk mengekalkan gaya aplikasi dan boleh menyebabkan pengulangan kod. Artikel ini menerangkan kaedah untuk menambah CSS dengan JavaScript.