Örnek
Bir kırmızı bir renk ekleyin <h1> elemanı:
document.getElementById("myH1").style.color = "red"; stilini ayarlamadan önce:
Hello World!
tarzını ayarladıktan sonra:
Hello World!
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
stil nitelik bir elemanın stil özelliği temsil eden bir CSSStyleDeclaration nesnesi döndürür.
stil özelliği olsun veya farklı CSS özelliklerini kullanarak bir elementin belirli stili ayarlamak için kullanılır.
Not: stil örneğin mülkiyet, eleman .Style = bir dize atayarak stilleri ayarlamak mümkün değildir "color: red;" . Bir elemanın stilini ayarlamak için bir ekleme "CSS" tarzı mülk ve böyle bir değer belirtin:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Gördüğünüz gibi, CSS özelliklerini ayarlamak için JavaScript sözdizimi CSS biraz daha farklıdır (backgroundColor instead of background-color) .
Tüm mevcut özelliklerin bir listesi için lütfen bkz Stil nesne başvurusu .
Not: stil özellik yalnızca örn öğenin satır içi stil özelliği, ayarlanan CSS bildirimlerini döndürür
<P style = "color: red;">. Gelen stil kuralları hakkında bilgi almak için bu özelliği kullanmak mümkün değildir <head> belge veya harici stil sayfalarında bölüm.
Ancak, erişebilir <style> dan eleman <head> Belgeyi kullanarak. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Not: yerine stil özelliğini kullanılması önerilir element . setAttribute("style", "...") yöntemi, stil özelliği belirtilebilir diğer CSS özelliklerinin üzerine çünkü style özelliğinde.
Tarayıcı Desteği
| özellik | |||||
|---|---|---|---|---|---|
| style | Evet | Evet | Evet | Evet | Evet |
Sözdizimi
stil özelliklerini Dönüş:
element .style. property Set stil özellikleri:
element .style. property = value Mülkiyet Değerler
| değer | Açıklama |
|---|---|
| value | Belirtilen özellik değerini belirtir. Örneğin, borderBottom özelliği için: eleman .style.borderBottom = "2px sabit kırmızı"; |
Teknik detaylar
| Geri dönüş değeri: | Bir elemanın stil özelliği temsil eden bir CSSStyleDeclaration nesne, |
|---|---|
| DOM Sürüm | Dom Düzey 2 CSS |
Diğer Örnekler
Örnek
Bir değerini alın <p> öğenin üst sınırında:
var x = document.getElementById("myP").style.borderTop;X'in sonucu olacaktır:
5px solid red Kendin dene " İlgili Sayfalar
CSS Eğitimi: CSS Eğitimi
CSS Referans: CSS Özellikleri
HTML DOM Referans: Stil Nesne Referans
HTML Referans: HTML <style> etiketi
<Eleman Nesne