Panduan ini menghuraikan objektif dan kerja sifat 'gaya' Elemen DOM HTML dalam JavaScript.
Bagaimanakah Harta 'gaya' Elemen HTML DOM Berfungsi dalam JavaScript?
DOM HTML “ gaya ” ialah sifat baca sahaja yang berfungsi berdasarkan sifat penggayaan yang diperuntukkan sewajarnya. Juga, ia mengembalikan ' CSSStyleDeclaration ” objek yang mengandungi semua atribut gaya sebaris bagi elemen HTML tertentu.
Catatan: Objek 'CSSStyleDeclaration' mengandungi atribut penggayaan CSS yang ditakrifkan dalam bahagian kepala.
Sintaks (Tetapkan Harta gaya)
unsur. gaya . harta benda = nilaiMenurut sintaks di atas, ' gaya ' harta hanya menyokong satu parameter ' nilai ” yang mewakili nilai harta penggayaan yang ditentukan.
Sintaks (Kembalikan Harta gaya)
unsur. gaya . harta bendaMari kita laksanakan sintaks yang dibincangkan di atas bagi sifat 'gaya' secara praktikal.
Contoh 1: Gunakan Harta 'gaya' untuk Menetapkan Warna Elemen HTML Tertentu
Contoh ini menggunakan sintaks asas ' gaya sifat ” untuk menetapkan nilai sifat “gaya” supaya warna elemen HTML tertentu ditukar.
Kod HTML
Pertama, pergi melalui kod HTML yang diberikan:
< h2 > Gunakan gaya Harta dalam JavaScript h2 >
< id h3 = 'H3' > Subtajuk Kedua. h3 >
Dalam baris kod di atas:
- ' ” Tag HTML menentukan subtajuk pertama.
- ' teg ” mencipta subtajuk kedua tahap 3 dengan id yang ditetapkan “H3”.
Kod JavaScript
Seterusnya, ikuti kod JavaScript yang dinyatakan:
< skrip >dokumen. getElementById ( 'H3' ) . gaya . warna = 'hijau' ;
skrip >
Dalam coretan kod di atas, ' document.getElementById() kaedah ” mengakses yang disertakan “ 'elemen melalui idnya' H3 'untuk menetapkan yang ditentukan' warna ” nilai atribut unsur melalui “ gaya.warna ” harta benda.
Pengeluaran
Output menunjukkan bahawa perwakilan visual elemen HTML yang disasarkan ditetapkan dengan sewajarnya menggunakan sifat 'gaya'.
Contoh 2: Gunakan Harta 'gaya' untuk Mendapatkan Nilai Atribut 'gaya' Gunaan
Dalam contoh ini, sifat 'gaya' membantu dalam mengetahui atribut 'gaya' yang ditetapkan bagi elemen HTML menggunakan sintaks umumnya (Kembalikan Harta gaya).
Kod HTML
Kod HTML dinyatakan di sini:
< h2 > Gunakan gaya Harta dalam JavaScript h2 >< id h3 = 'H3' gaya = 'warna latar belakang:oren;' > Nilai warna latar belakang subtajuk kedua ialah : h3 >
< id h4 = 'demo' > h4 >
Dalam kod ini:
- ' Teg HTML menggunakan atribut 'gaya' yang menetapkan warna latar belakang elemen HTML '
'.
- ' tag ” mencipta subtajuk kosong tahap 4 yang mempunyai id “ demo ”.
Kod JavaScript
Sekarang, lihat kod JavaScript yang diberikan:
< skrip >const nilai = dokumen. getElementById ( 'H3' ) . gaya . warna latar belakang ;
dokumen. getElementById ( 'demo' ) . innerHTML = nilai ;
skrip >
Dalam kod yang ditulis di atas:
- Pembolehubah ' nilai ” diisytiharkan dengan “ const ' kata kunci yang menggunakan ' document.getElementById() ' kaedah untuk mengambil elemen '
' menggunakan idnya untuk mendapatkan nilai atribut 'gaya' yang digunakan dan menerapkannya pada elemen iaitu, '
' melalui sifat 'gaya'.
- Kaedah 'document.getElementById()' digunakan sekali lagi untuk mengakses elemen '
' kosong yang ditambah dan memaparkan nilai atribut 'gaya' yang diperuntukkan terhadap elemen HTML yang diambil dan menambahkannya sebagai subtajuk melalui ' innerHTML ” harta benda.
Pengeluaran
Output menggunakan warna latar belakang pada elemen dan nilai atribut 'gaya' yang ditetapkan juga dikembalikan dengan sewajarnya.
Kesimpulan
JavaScript menggunakan ' gaya sifat ” untuk menetapkan dan mengembalikan sifat “gaya” sebaris unsur DOM HTML. Ia memerlukan 'nilai' tambahan untuk menggunakan fungsi yang diingini dengan sewajarnya. Selain daripada menetapkan dan mendapatkan semula, ia juga berfaedah untuk menukar atribut 'gaya' sedia ada. Panduan ini menunjukkan objektif utama, kerja dan pelaksanaan praktikal bagi Harta gaya Elemen DOM HTML.