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.
JavaScript Style Kullanımı
Örneğin Html sayfamızdaki h1 etiketinin arka plan rengini kırmızı yapmak istediğimizde aşağıdaki şekilde yazıyoruz.
|
1 2 3 4 5 6 7 |
<h1>Merhaba Dunya!</h1> <script> document.querySelector("h1").style.backgroundColor = "red"; </script> |
Ö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.
|
1 2 3 4 5 6 7 8 9 |
<h1 style="background-color:red;">Merhaba Dunya!</h1> <script> let renk = document.querySelector("h1").style.backgroundColor; console.log(renk); </script> |
Çı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.
Html Kodları
|
1 2 3 4 5 6 7 |
<button id="css-get">Css() - Get</button> <button id="css-set">Css() - Set</button> <button id="css-set-mult">Css() - Set Multiple</button> <p style="font-size: 22px;">Lorem ipsum dolor sitamet.</p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> body { margin: 20px; font-size: 18px; } button { width: 160px; padding: 10px; margin-right: 12px; margin-bottom: 12px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } </style> |
JavaScript Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> document.querySelector("#css-get").addEventListener("click",function () { let size = document.querySelector("p").style.fontSize; alert("font-size : " + size); }); document.querySelector("#css-set").addEventListener("click",function () { document.querySelector("p").style.backgroundColor = "#A519BE"; }); document.querySelector("#css-set-mult").addEventListener("click",function () { let p = document.querySelector("p"); p.style.backgroundColor = "#4CAF50"; p.style.color = "#fff"; p.style.fontSize = "36px"; p.style.fontWeight = "bold"; p.style.fontStyle = "italic"; p.style.padding = "15px"; }); </script> |
Aşağıdaki uygulamada butonlara tıklayarak p etiketi üzerindeki değişimleri inceleyebilirsiniz.
Tüm Css Özelliklerinin JavaScript Sözdizimi
| Ö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.
