HTML DOM stili Özellik
Örnek
Bir <h1> öğesine kırmızı bir renk ekleyin:
document.getElementById("myH1").style.color = "red";
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
style özelliği, bir öğenin stil niteliğini temsil eden bir CSSStyleDeclaration nesnesi döndürür.
style özelliği, farklı CSS özelliklerini kullanarak bir öğenin belirli bir stilini almak veya ayarlamak için kullanılır.
Not: Stil özelliğine bir dize atayarak stilleri ayarlamak mümkün değildir, örneğin element .style = "color: red;". Bir öğenin stilini ayarlamak için stile bir "CSS" özelliği ekleyin ve aşağıdaki gibi bir değer belirtin:
element.style.backgroundColor = "red"; // set the background color of an element to red
Gördüğünüz gibi, CSS özelliklerini ayarlamak için JavaScript sözdizimi CSS'den biraz farklıdır (arka plan rengi yerine arka plan rengi).
Mevcut tüm özelliklerin bir listesi için Stil Nesnesi Referansımıza bakın .
Not: style özelliği, yalnızca öğenin satır içi stil özniteliğinde ayarlanan CSS bildirimlerini döndürür, örneğin
<p style="color: red;">. Belgedeki veya harici stil sayfalarındaki <head> bölümünden stil kuralları hakkında bilgi almak için bu özelliği kullanmak mümkün değildir.
Ancak, <head> öğesinden <style> öğesine, document.getElementsByTagName() işlevini kullanarak erişebilirsiniz:
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Not: style özelliği , style özelliğinde belirtilebilecek diğer CSS özelliklerinin üzerine yazmayacağından , element .setAttribute("style", "...") yöntemi yerine style özelliğinin kullanılması önerilir .
Tarayıcı Desteği
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
Stil özelliklerini döndür:
element.style.property
Stil özelliklerini ayarlayın:
element.style.property = value
Mülk değerleri
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Teknik detaylar
| Geri dönüş değeri: | Bir öğenin stil niteliğini temsil eden bir CSSStyleDeclaration nesnesi |
|---|---|
| DOM Sürümü | Dom Seviye 2 CSS |
Daha fazla örnek
Örnek
Bir <p> öğesinin üst sınırının değerini alın:
var x = document.getElementById("myP").style.borderTop;
İlgili Sayfalar
CSS Eğitimi: CSS Eğitimi
CSS Referansı: CSS Özellikleri
HTML DOM Referansı: Stil Nesnesi Referansı
HTML Referansı: HTML <style> etiketi
❮ Öğe Nesnesi