Properti gaya DOM HTML
Contoh
Tambahkan warna merah ke elemen <h1>:
document.getElementById("myH1").style.color = "red";
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti gaya mengembalikan objek CSSStyleDeclaration, yang mewakili atribut gaya elemen.
Properti gaya digunakan untuk mendapatkan atau mengatur gaya tertentu dari suatu elemen menggunakan properti CSS yang berbeda.
Catatan: Tidak mungkin menyetel gaya dengan menetapkan string ke properti gaya, misalnya elemen .style = "color: red;". Untuk menyetel gaya elemen, tambahkan properti "CSS" ke gaya dan tentukan nilainya, seperti ini:
element.style.backgroundColor = "red"; // set the background color of an element to red
Seperti yang Anda lihat, sintaks JavaScript untuk mengatur properti CSS sedikit berbeda dari CSS (backgroundColor bukan background-color).
Untuk daftar semua properti yang tersedia, lihat Referensi Objek Gaya kami .
Catatan: Properti style hanya mengembalikan deklarasi CSS yang disetel dalam atribut gaya sebaris elemen, misalnya
<p style="color: red;">. Properti ini tidak dapat digunakan untuk mendapatkan informasi tentang aturan gaya dari bagian <head> di dokumen atau lembar gaya eksternal.
Namun, Anda dapat mengakses elemen <style> dari <head> dengan menggunakan document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Catatan: Direkomendasikan untuk menggunakan properti style daripada metode elemen .setAttribute("style", "...") , karena properti style tidak akan menimpa properti CSS lain yang mungkin ditentukan dalam atribut style.
Dukungan Peramban
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Kembalikan properti gaya:
element.style.property
Setel properti gaya:
element.style.property = value
Nilai properti
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Detail Teknis
| Nilai Kembali: | Objek CSSStyleDeclaration, mewakili atribut gaya elemen |
|---|---|
| Versi DOM | CSS Dom Level 2 |
Lebih Banyak Contoh
Contoh
Dapatkan nilai batas atas elemen <p>:
var x = document.getElementById("myP").style.borderTop;
Halaman Terkait
Tutorial CSS : Tutorial CSS
Referensi CSS: Properti CSS
Referensi DOM HTML: Referensi Objek Gaya
Referensi HTML: tag HTML <style>
Objek Elemen