JavaScript Html DOM Style Kullanımı

JavaScript ile Html DOM üzerindeki öğelerin Css özelliklerini alabilir veya bu öğelere yeni Css özellikleri ekleyebiliriz. Bunun için JavaScript’deki style özelliğini kullanıyoruz.

Örneğin Html sayfamızdaki h1 etiketinin arka plan rengini kırmızı yapmak istediğimizde aşağıdaki şekilde yazıyoruz.

Önce değişiklik yapmak istediğimiz Html öğesine erişiyoruz. Daha sonra ise style özelliği ile istediğimiz Css özelliklerini veriyoruz.

Css özelliklerini değiştirmek için kullanılan JavaScript söz dizimi CSS’ten  biraz farklıdır. Örneğin arka plan rengini değiştirmek için Css’te background-color olarak kullanırken JavaScript’te backgroundColor olarak kullanıyoruz.

Tüm Css özelliklerinin JavaScript’te kullanım şekillerini yazımın sonunda tablo olarak bulabilirsiniz.

Html öğelerine erişim metodları hakkında detaylı bilgi için şu yazılarımı okuyabilirsiniz.

JavaScript Html DOM Erişim Yöntemleri – 1

JavaScript Html DOM Erişim Yöntemleri – 2

Şimdi de Html sayfamızdaki h1 etiketinin arka plan renginin ne olduğunu öğrenmeye çalışalım.

 Çıktısı :  red

 Önemli :  style özelliği ile sadece Html öğesinin satır içi Css özelliklerine erişebiliriz. Yani <head> </head> etiketleri arasında tanımlanan Css özelliklerine veya harici Css dosyasında tanımlanan Css özelliklerine style özelliği ile erişemeyiz.

Konunun daha iyi anlaşılabilmesi için uygulamalı bir örnek daha yapalım.

Örneğimizde bir p etiketi tanımlayalım ve satır içi Css özelliği ekleyelim.

Daha sonra 3 buton oluşturalım.

 ⇒  “Css() – Get” butonuna tıkladığımızda p etiketinin font-size değerini alert mesajı ile gösterelim.

 ⇒  “Css() – Set” butonuna tıkladığımızda p etiketine arka plan rengi verelim.

 ⇒  “Css() – Set Multiple” butonuna tıkladığımızda ise p etiketine aynı anda birden fazla Css özelliğini uygulayalım.

Artık kodlarımızı yazmaya başlayabiliriz.

Css Kodları

JavaScript Kodları

Aşağıdaki uygulamada butonlara tıklayarak p etiketi üzerindeki değişimleri inceleyebilirsiniz.

Özellik CSS Versiyonu
alignContent 3
alignItems 3
alignSelf 3
animation 3
animationDelay 3
animationDirection 3
animationDuration 3
animationFillMode 3
animationIterationCount 3
animationName 3
animationTimingFunction 3
animationPlayState 3
background 1
backgroundAttachment 1
backgroundColor 1
backgroundImage 1
backgroundPosition 1
backgroundRepeat 1
backgroundClip 3
backgroundOrigin 3
backgroundSize 3
backfaceVisibility 3
border 1
borderBottom 1
borderBottomColor 1
borderBottomLeftRadius 3
borderBottomRightRadius 3
borderBottomStyle 1
borderBottomWidth 1
borderCollapse 2
borderColor 1
borderImage 3
borderImageOutset 3
borderImageRepeat 3
borderImageSlice 3
borderImageSource 3
borderImageWidth 3
borderLeft 1
borderLeftColor 1
borderLeftStyle 1
borderLeftWidth 1
borderRadius 3
borderRight 1
borderRightColor 1
borderRightStyle 1
borderRightWidth 1
borderSpacing 2
borderStyle 1
borderTop 1
borderTopColor 1
borderTopLeftRadius 3
borderTopRightRadius 3
borderTopStyle 1
borderTopWidth 1
borderWidth 1
bottom 2
boxShadow 3
boxSizing 3
captionSide 2
clear 1
clip 2
color 1
columnCount 3
columnFill 3
columnGap 3
columnRule 3
columnRuleColor 3
columnRuleStyle 3
columnRuleWidth 3
columns 3
columnSpan 3
columnWidth 3
counterIncrement 2
counterReset 2
cursor 2
direction 2
display 1
emptyCells 2
filter 3
flex 3
flexBasis 3
flexDirection 3
flexFlow 3
flexGrow 3
flexShrink 3
flexWrap 3
cssFloat 1
font 1
fontFamily 1
fontSize 1
fontStyle 1
fontVariant 1
fontWeight 1
fontSizeAdjust 3
height 1
isolation 3
justifyContent 3
left 2
letterSpacing 1
lineHeight 1
listStyle 1
listStyleImage 1
listStylePosition 1
listStyleType 1
margin 1
marginBottom 1
marginLeft 1
marginRight 1
marginTop 1
maxHeight 2
maxWidth 2
minHeight 2
minWidth 2
objectFit 3
objectPosition 3
opacity 3
order 3
orphans 2
outline 2
outlineColor 2
outlineOffset 3
outlineStyle 2
outlineWidth 2
overflow 2
overflowX 3
overflowY 3
padding 1
paddingBottom 1
paddingLeft 1
paddingRight 1
paddingTop 1
pageBreakAfter 2
pageBreakBefore 2
pageBreakInside 2
perspective 3
perspectiveOrigin 3
position 2
quotes 2
resize 3
right 2
tableLayout 2
tabSize 3
textAlign 1
textAlignLast 3
textDecoration 1
textDecorationColor 3
textDecorationLine 3
textDecorationStyle 3
textIndent 1
textOverflow 3
textShadow 3
textTransform 1
top 2
transform 3
transformOrigin 3
transformStyle 3
transition 3
transitionProperty 3
transitionDuration 3
transitionTimingFunction 3
transitionDelay 3
unicodeBidi 2
userSelect 2
verticalAlign 1
visibility 2
whiteSpace 1
width 1
wordBreak 3
wordSpacing 1
wordWrap 3
widows 2
zIndex 2

 ⇒  JavaScript style özelliği IE ve tüm modern tarayıcılar tarafından desteklenir.

Umarım “JavaScript Html DOM Style Kullanımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Tüm Css Kodları ve Anlamları – Detaylı Anlatım

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.