Properti read-only style_ mengembalikan gaya sebaris elemen dalam bentuk objek CSSStyleDeclaration yang berisi daftar semua properti gaya untuk elemen tersebut dengan nilai yang ditetapkan untuk atribut yang ditentukan dalam atribut sebaris elemen style
Catatan. Lihat untuk daftar properti CSS yang dapat diakses melalui style. Properti style_ memiliki prioritas yang sama (dan tertinggi) dalam kaskade CSS sebagai deklarasi gaya sebaris yang ditetapkan melalui atribut style
Objek CSSStyleDeclaration_, dengan properti berikut
bendera yang dihitungBatal disetel
Batal
simpul pemilikconst element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (Object.hasOwn(elementStyle, prop)) { out += ` ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`; } } console.log(out); 0
Meskipun properti ini dianggap hanya-baca, dimungkinkan untuk menyetel gaya sebaris dengan menetapkan string langsung ke properti style. Dalam hal ini string diteruskan ke const element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (Object.hasOwn(elementStyle, prop)) { out += ` ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`; } } console.log(out); 2. Menggunakan style dengan cara ini akan sepenuhnya menimpa semua gaya sebaris pada elemen
Oleh karena itu, untuk menambahkan gaya tertentu ke suatu elemen tanpa mengubah nilai gaya lainnya, umumnya lebih baik menyetel properti individual pada objek CSSStyleDeclaration. Misalnya, const element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (Object.hasOwn(elementStyle, prop)) { out += ` ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`; } } console.log(out); 5
Deklarasi gaya disetel ulang dengan menyetelnya ke const element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (Object.hasOwn(elementStyle, prop)) { out += ` ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`; } } console.log(out); 6 atau string kosong, mis. g. , const element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (Object.hasOwn(elementStyle, prop)) { out += ` ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`; } } console.log(out); 7
Properti style_ tidak berguna untuk mempelajari sepenuhnya tentang gaya yang diterapkan pada elemen, karena ini hanya mewakili deklarasi CSS yang diatur dalam atribut inline style elemen, bukan yang berasal dari aturan gaya di tempat lain, seperti aturan gaya di bagian … fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' … 0, . Untuk mendapatkan nilai semua properti CSS untuk suatu elemen, Anda harus menggunakan … fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' … 1 sebagai gantinya
Cuplikan kode berikut menunjukkan perbedaan antara nilai yang diperoleh menggunakan properti style elemen dan yang diperoleh menggunakan metode … fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' … 3
<!DOCTYPE html> <html lang="en-US"> <body style="font-weight:bold;"> <div style="color:red" id="myElement">..</div> </body> </html> _
const element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (Object.hasOwn(elementStyle, prop)) { out += ` ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`; } } console.log(out);
Outputnya akan seperti itu
… fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' …Perhatikan keberadaan nilai … fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' … _4 untuk … fontWeight = '' > 'bold' color = 'red' > 'rgb(255, 0, 0)' … 5 dalam gaya yang dihitung dan ketidakhadirannya dalam properti style elemen