Contoh
Menambahkan warna merah ke <h1> elemen:
document.getElementById("myH1").style.color = "red"; Sebelum pengaturan gaya:
Hello World!
Setelah pengaturan gaya:
Hello World!
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti gaya mengembalikan sebuah objek CSSStyleDeclaration, yang mewakili atribut gaya elemen ini.
Properti gaya digunakan untuk mendapatkan atau mengatur gaya tertentu dari suatu unsur menggunakan properti CSS yang berbeda.
Catatan: Hal ini tidak mungkin untuk mengatur gaya dengan menetapkan string ke properti gaya, misalnya elemen .style = "color: red;" . Untuk mengatur gaya elemen, tambahkan "CSS" properti untuk gaya dan menentukan nilai, seperti ini:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Seperti yang Anda lihat, sintaks JavaScript untuk pengaturan properti CSS sedikit berbeda dari CSS (backgroundColor instead of background-color) .
Untuk daftar semua properti yang tersedia, lihat Referensi Gaya Object .
Catatan: properti gaya hanya mengembalikan deklarasi CSS diatur dalam atribut style inline elemen, misalnya
<P style = "color: red;">. Hal ini tidak mungkin untuk menggunakan properti ini untuk mendapatkan informasi tentang aturan gaya dari <head> bagian dalam dokumen atau lembar gaya eksternal.
Namun, Anda dapat mengakses <style> elemen dari <head> dengan menggunakan dokumen. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Catatan: Disarankan untuk menggunakan properti gaya bukan element . setAttribute("style", "...") metode, karena properti gaya tidak akan menimpa properti CSS lain yang mungkin ditentukan dalam style atribut.
Dukungan Browser
| Milik | |||||
|---|---|---|---|---|---|
| style | iya nih | iya nih | iya nih | iya nih | iya nih |
Sintaksis
Kembali sifat gaya:
element .style. property Mengatur properti gaya:
element .style. property = value Nilai properti
| Nilai | Deskripsi |
|---|---|
| value | Menentukan nilai properti yang ditentukan. Misalnya, untuk properti borderBottom: Unsur .style.borderBottom = "2px padat merah"; |
Rincian teknis
| Kembali Nilai: | Sebuah objek CSSStyleDeclaration, mewakili atribut style sebuah elemen |
|---|---|
| DOM Versi | Dom Level 2 CSS |
Contoh lebih
Contoh
Dapatkan nilai dari <p> top-border elemen:
var x = document.getElementById("myP").style.borderTop;Hasil x akan:
5px solid red Cobalah sendiri " Pages terkait
CSS Tutorial: CSS Tutorial
CSS Referensi: CSS Properti
HTML DOM Referensi: Gaya Referensi Obyek
: Referensi HTML HTML <style> tag
<Elemen Object