Artikel ini akan menjelaskan metode untuk menambahkan CSS dengan JavaScript.
Bagaimana Cara Menambahkan CSS Dengan JavaScript?
Dalam JavaScript, Anda dapat menambahkan gaya CSS ke suatu elemen dengan memodifikasi properti gayanya menggunakan metode atau pendekatan berikut:
- style Properti sebagai gaya inline
- setAttribute() Metode sebagai gaya inline
- metode createElement() sebagai gaya global
Metode 1: Menambahkan CSS Dengan JavaScript Menggunakan Properti 'style'.
Untuk menambahkan CSS dalam JavaScript, gunakan “ gaya ' Properti. Ini digunakan untuk mengakses dan memanipulasi gaya sebaris suatu elemen. Ini memberikan objek yang mewakili gaya sebaris dari suatu elemen dan memungkinkan seseorang untuk mendapatkan atau mengatur properti gaya individual.
Sintaksis
Untuk menambahkan gaya CSS di JavaScript, sintaks berikut digunakan untuk “ gaya ' Properti:
elemen. gaya ;
Di Sini, ' elemen ” adalah referensi ke elemen HTML.
Contoh
Dalam contoh berikut, kami akan memberi gaya pada tombol menggunakan JavaScript. Pertama, kita akan membuat tiga tombol dan menetapkan id untuknya, yang membantu mengakses elemen tombol untuk gaya:
< tombol id = 'btn2' > Menolak tombol >
< tombol id = 'btn3' > Menerima tombol >
Sebelum menata hasilnya akan terlihat seperti ini:
Sekarang, mari beri gaya pada tombol-tombol ini dalam JavaScript menggunakan “ gaya ' Properti. Pertama, dapatkan semua elemen tombol menggunakan id yang ditetapkan dengan bantuan “ getElementById() ' metode:
biarkan setuju = dokumen. getElementById ( 'btn1' ) ;biarkan menolak = dokumen. getElementById ( 'btn2' ) ;
biarkan menerima = dokumen. getElementById ( 'btn3' ) ;
Atur warna latar belakang semua tombol ini menggunakan tombol “ gaya ' Properti:
setuju. gaya . warna latar belakang = 'hijau' ;menolak. gaya . warna latar belakang = 'merah' ;
menerima. gaya . warna latar belakang = 'kuning' ;
Seperti yang Anda lihat, tombol telah berhasil ditata menggunakan “ gaya ' Properti:
Metode 2: Menambahkan CSS Dengan JavaScript Menggunakan Metode “setAttribute()”.
Untuk menambahkan gaya CSS di JavaScript, gunakan tombol “ setAttribute() ' metode. Ini digunakan untuk mengatur atau menambahkan atribut dan nilainya ke elemen HTML.
Sintaksis
Sintaks berikut digunakan untuk “ setAttribute() ' metode:
Contoh
Di sini, kita akan mengatur gaya yang berbeda pada tombol di JavaScript menggunakan “ setAttribute() ' metode. Setel radius batas semua tombol ke “ .5rem ”, dan warna teks dari “ Setuju ' Dan ' Menolak tombol ” ke “ putih ”.
menolak. setAttribute ( 'gaya' , 'warna latar belakang: merah; warna: putih; radius batas: .5rem;' ) ;
menerima. setAttribute ( 'gaya' , 'warna latar belakang: kuning; radius batas: .5rem;' ) ;
Keluaran
Metode 3: Menambahkan CSS Dengan JavaScript Menggunakan Metode “createElement()”.
Jika Anda ingin membuat kelas atau id dalam gaya JavaScript seperti pada gaya CSS, gunakan ' buatElemen() ' metode. Ini digunakan untuk membuat elemen baru secara dinamis. Untuk penataan, buat “ gaya ” elemen menggunakan metode ini. “ buatElemen('gaya') ” dalam JavaScript digunakan untuk membuat elemen gaya baru secara dinamis, yang dapat digunakan untuk menambahkan gaya CSS ke halaman web.
Sintaksis
Sintaks yang diberikan digunakan untuk “ buatElemen() ' metode:
Untuk menambahkan gaya CSS dalam JavaScript, gunakan sintaks yang diberikan:
const gaya = dokumen. createElement ( 'gaya' ) ;Kemudian tambahkan elemen gaya di tag kepala menggunakan sintaks di bawah ini:
dokumen. kepala . appendChild ( gaya ) ;Di Sini, ' gaya ” adalah referensi ke elemen gaya yang baru dibuat, dan “ dokumen.kepala ” adalah elemen kepala dari dokumen HTML.
Contoh
Pertama, buat elemen gaya menggunakan “ buatElemen() ' metode:
Sekarang, buat ' btn ” kelas untuk menerapkan gaya yang sama pada semua tombol dan id “ btn1 ”, “ btn2 ' Dan ' btn3 ” untuk penataan tombol individual:
gaya. innerHTML = `. btn {
font - ukuran : 1.1rem ;
lapisan : 3px ;
batas : 2px ;
font - keluarga : tanpa - serif ;
berbatasan - radius : .5rem ;
}
#btn1 {
latar belakang - warna : hijau ;
warna : putih ;
}
#btn2 {
latar belakang - warna : merah ;
warna : putih ;
}
#btn3 {
latar belakang - warna : kuning ;
}
` ;
Sekarang, tambahkan elemen gaya ke bagian atas dokumen dengan meneruskannya sebagai parameter ke ' tambahkanAnak() ' metode:
dokumen. kepala . appendChild ( gaya ) ; Keluaran
Itu semua tentang menambahkan CSS dalam JavaScript.
Kesimpulan
Untuk menambahkan CSS dengan JavaScript, gunakan gaya inline termasuk “ gaya ” Properti, dan “ setAttribute() ” metode, atau gaya global menggunakan “ buatElemen() ' metode. Gaya global lebih efisien sementara metode inline tidak disarankan karena menyulitkan mempertahankan gaya aplikasi dan dapat menyebabkan pengulangan kode. Artikel ini menjelaskan metode untuk menambahkan CSS dengan JavaScript.