Panduan ini menguraikan tujuan dan cara kerja properti 'gaya' Elemen DOM HTML dalam JavaScript.
Bagaimana Elemen 'style' Elemen DOM HTML Bekerja di JavaScript?
DOM HTML “ gaya ” adalah properti hanya-baca yang bekerja berdasarkan properti gaya yang dialokasikan. Juga, ini mengembalikan ' Deklarasi CSSStyle ” yang berisi semua atribut gaya sebaris dari elemen HTML tertentu.
Catatan: Objek “CSSStyleDeclaration” memang berisi atribut gaya CSS yang ditentukan di bagian kepala.
Sintaks (Tetapkan properti gaya)
elemen. gaya . Properti = nilaiMenurut sintaks di atas, ' gaya ” properti hanya mendukung satu parameter “ nilai ” yang mewakili nilai properti gaya yang ditentukan.
Sintaks (Mengembalikan Properti gaya)
elemen. gaya . PropertiMari terapkan sintaks properti 'style' yang telah dibahas di atas secara praktis.
Contoh 1: Gunakan Properti 'style' untuk Mengatur Warna Elemen HTML Tertentu
Contoh ini menerapkan sintaks dasar dari “ gaya ” untuk menyetel nilai properti 'gaya' sedemikian rupa sehingga warna elemen HTML tertentu berubah.
Kode HTML
Pertama, buka kode HTML yang diberikan:
< h2 > Gunakan properti gaya dalam JavaScript h2 >
< id h3 = 'H3' > Subjudul Kedua. h3 >
Pada baris kode di atas:
- “ ” Tag HTML menentukan subjudul pertama.
- “ ” tag membuat subjudul kedua dari level 3 dengan id yang ditetapkan 'H3'.
Kode JavaScript
Selanjutnya, ikuti kode JavaScript yang disebutkan:
< naskah >dokumen. getElementById ( 'H3' ) . gaya . warna = 'hijau' ;
naskah >
Dalam potongan kode di atas, “ dokumen.getElementById() ” metode mengakses yang disertakan “ ” elemen melalui idnya “ H3 ” untuk menyetel yang ditentukan “ warna ” nilai atribut elemen melalui “ gaya. warna ' Properti.
Keluaran
Output menunjukkan bahwa representasi visual elemen HTML yang ditargetkan diatur sesuai dengan menggunakan properti 'style'.
Contoh 2: Gunakan Properti “style” untuk Mendapatkan Nilai dari Atribut “style” yang Diterapkan
Dalam contoh ini, properti 'gaya' membantu menemukan atribut 'gaya' yang ditetapkan dari elemen HTML menggunakan sintaks umumnya (Mengembalikan Properti gaya).
Kode HTML
Kode HTML dinyatakan di sini:
< h2 > Gunakan properti gaya dalam JavaScript h2 >< id h3 = 'H3' gaya = 'warna latar belakang: oranye;' > Nilai warna latar subjudul kedua adalah : h3 >
< id h4 = 'demo' > h4 >
Dalam kode ini:
- “ ” Tag HTML menggunakan atribut “style” yang mengatur warna latar belakang elemen HTML “
”.
- “ ” tag membuat subjudul kosong level 4 yang memiliki id “ demo ”.
Kode JavaScript
Sekarang, lihat kode JavaScript yang diberikan:
< naskah >const nilai = dokumen. getElementById ( 'H3' ) . gaya . warna latar belakang ;
dokumen. getElementById ( 'demo' ) . innerHTML = nilai ;
naskah >
Dalam kode tertulis di atas:
- Variabel “ nilai ” dideklarasikan dengan “ const ” kata kunci yang menerapkan “ dokumen.getElementById() ” untuk mengambil elemen “
” menggunakan idnya untuk mendapatkan nilai atribut “style” yang diterapkan dan menerapkannya ke elemen yaitu, “
” melalui properti “style”.
- Metode “document.getElementById()” digunakan lagi untuk mengakses elemen kosong “
” yang ditambahkan dan menampilkan nilai atribut “style” yang dialokasikan terhadap elemen HTML yang diambil dan menambahkannya sebagai subjudul melalui “ innerHTML ' Properti.
Keluaran
Keluarannya menerapkan warna latar belakang ke elemen dan nilai atribut set 'style' juga dikembalikan sesuai dengan itu.
Kesimpulan
JavaScript menggunakan “ gaya ” untuk menetapkan dan mengembalikan properti 'gaya' sebaris dari elemen DOM HTML. Ini membutuhkan 'nilai' tambahan untuk menerapkan fungsionalitas yang diinginkan. Selain mengatur dan mengambil, juga bermanfaat untuk mengubah atribut 'gaya' yang ada. Panduan ini mendemonstrasikan tujuan utama, cara kerja, dan implementasi praktis dari Properti gaya Elemen DOM HTML.