javaScript HTMLElement.style (CSS DOM)

HTML DOM, JavaScript'in HTML öğelerinin stilini değiştirmesini sağlar. HTMLElement.style özelliği, bir öğenin satır içi stilini ayarlamanın yanı sıra css özelliklerini almak için kullanılır. Öğenin satır içi stil niteliğinde tanımlanan özniteliklere atanan değerlerle bu öğenin tüm stil özelliklerinin bir listesini içeren bir CSSStyleDeclaration nesnesi döndürür.

ÖRNEK:

var el=document.querySelector("#test")

console.log(el.style);

Stiller doğrudan stil özelliğine değer atanarak ayarlanır.

 el.style.color ="blue"

div.style bir nesnedir salt okunur kabul edilir, çünkü style özniteliği okunur bir CSSStyleDeclaration nesnesi döndürür. Normalde, style.* tek tek stil özellikleri atamak için kullanırız . Tam stili bir dizge olarak ayarlamak için özel bir özellik var.

var el=document.querySelector("#test")

el.style.cssText = "background-color:blue; font-size:55px;
 
          color:white !important;"

Böyle bir atama varolan tüm inline stilleri siler, ekleme yapmaz; Ancak var olan aynı stili değiştirir. Var olan inline stilleri korumak için Aşağıda ki yöntemi kullanın.

var el=document.querySelector("#test");
 
 el.style.cssText += "color: red; font-size: 20px;";

inline (satır içi) css style(stilleri) toplu öğrenmek.

var el=document.querySelector("#test");

alert(el.style.cssText); //ÇIKTI: color: blue; font-size: 25px;

CSS Özellik Adlarını JavaScript'e Dönüştürme

CSS3, JavaScript aracılığıyla şimdiye kadar olduğundan çok daha fazla özellik sundu. CSS özellik Adları JavaScript adlandırma kurallarına uygun hale getirmek için, CSS özellik adları stil sayfalarından farklı bir biçimde kullanılır. CSS özellik adları, kelimeleri birbirine bağlamak için tirelerle birlikte küçük harf kullanırken, javascript eşdeğerleri deve halini (harfleri deve hörgücü gibi büyütmek) kullanır. Bu nedenle "background-color", "backgroundColor" olur ve "list-style-type" "listStyleType" olur. Yükseklik (height) gibi tek bir sözcük özelliği olduğu gibi kalır.

background-color  => el.style.backgroundColor

z-index           => el.style.zIndex

border-left-width => el.style.borderLeftWidth

CSS style özelliklerini direk yazmak için köşeli parantezleri [ " " ] kullanırız.

var element = document.querySelector(".deneme");

element.style["background-color"]="gray";

element.style["color"]="white";

//css style özelliklerin değerini okuma

alert(element.style["background-color"]);

alert(element.style["color"]); 

Stil özelliklerini sıfırlama

Stil etkisini sıfırlamak için aşağıda ki örneğe bakın.

element.style.color = "";

Ön-ekli özellikler :

Tarayıcı-öneki özellikleri gibi -moz-border-radius, -webkit-border-radius aynı kuralı, uygulayın yani tire(-) büyükharf olur :

button.style.MozBorderRadius = '5px';

button.style.WebkitBorderRadius = '5px';

CSS Sitilin Değeri Okunması

Bir stilin değiştirilmesi kolaydır. Ama nasıl okunur ? Örneğin, bir unsurun boyutunu, kenar boşluklarını ve rengini bilmek istiyoruz. Bu değerler nasıl okunur?

İnline css style okunabilir, style etiket arasına yazılan ve harici css özellikler bu yöntemle okunmaz.

ÖRNEK :

var x=document.querySelector("#box").style.color;

alert(x);

var x=document.querySelector("#box").style.margin;

alert(x);

CSSStyleDeclaration Nesnesi ve Harici CSS Stilleri Okuma

Stil sayfaları veya bir öğenin style özniteliği ile uğraşırken, CSS üzerinden DOM üzerinden tam kontrol yapmak için CSSStyleDeclaration nesnesini kullanmanız gerekir .

CSSStyleDeclaration Nesne Özellikleri :

• CSSStyleDeclaration.cssText :CSS Stilin metnini alır veya ayarlar.
• CSSStyleDeclaration.length :Öğelerin sayısını alır.
• CSSStyleDeclaration.parentRule :Stil kuralı varsa getirir.

CSSStyleDeclaration Nesne Methodu

• CSSStyleDeclaration.getPropertyPriority() :Mülkün "important" önceliği olup olmadığını belirtir
• CSSStyleDeclaration.getPropertyValue() :Belirtilen değeri bir dize olarak alır.
• CSSStyleDeclaration.item() :Özellik adını alır.
• CSSStyleDeclaration.removeProperty() :Belirtilen Özelliği kaldırır.
• CSSStyleDeclaration.setProperty() :Belirtilen Özelliğin değerini ve önceliğini ayarlar.

DOM getComputedStyle() methodu

GetComputedStyle() yöntemi, tüm gerçek (hesaplanan) CSS mülkünü ve belirtilen öğenin değerlerini alır.

Hesaplanan stil aslında genişlik veya yüksekliğe verilmiş % değerler sonucu pixel'e çevrilmiş hali veya css calc özelliğinin calc(100% - 100px) hesaplanmış hali.

Stil kaynakları şunları içerebilir: iç stil sayfaları, harici stil sayfaları, devralınan stiller ve tarayıcı varsayılan stilleri okuma özelliği vardır.

Çoğu modern tarayıcı DOM getComputedStyle() methodu desteklemektedir.

GetComputedStyle() methodu, bir CSSStyleDeclaration nesnesi döndürür.

SÖZDİZİMİ :

getComputedStyle(element, pseudoElement)

element : Gereklidir. İstenilen stil ayarlarını içeren öğe (DOM Düğümü).

pseudoElement :CSS sözde class'ın adı veya boş bir değer verilir. İsteğe bağlıdır.

Geri dönüş değeri :

CSSStyleDeclaration türünde bir nesne döndürür.

İstenen nesneye uygulanan CSS ayarlarını içeren bir CSSStyleDeclaration nesnesi.

Döndürülen nesne ayarları geçerli tüm stil kuralları için hesaba katılır ve belirtilen nesneye uygulanan çeşitli CSS özelliklerinin çözümlenmiş değerlerini gösterir.

ÖRNEK :

HTML :

<div id="test" style="color:blue">javascript</div>

javaScript

var el=document.querySelector("#test");

var x= getComputedStyle(el);

console.log(x);//ÇIKTI: CSSStyleDeclaration object

Yukarıda ki örnekte çıktıyı görmek için F12 tuşuna basarak consolu açalım. Çıktı olarak CSSStyleDeclaration nesnesi vardır. Yanındaki ok tuşuna tıklayın bütün css stilleri salt okunurdur.

ÖRNEK :

Test adında css dosya oluşturalım ve stiller oluşturalım. Bu stilleri getPropertyValue(propertyName) Verilen CSS özelliklerin adına ait değerleri öğrenelim.

CSS :

.deneme{
     width: 200px;

     height: 200px;

     padding: 30px;

     color:blue;

     border: 20px solid #BCBCBC;
     }

HTML :

<div class="deneme">javaScript</div>

javaScript :

var el=document.querySelector(".deneme");
 
var x= getComputedStyle(el).getPropertyValue("height");
 
alert(x);// ÇIKTI:200

CSSStyleDeclaration nesnesi salt okunur olduğu için şöylede değerleri okuyabiliriz.

javaScript :

var el=document.querySelector(".deneme");
 
var x= getComputedStyle(el).height;
 
alert(x);// ÇIKTI:200

getComputedStyle() Methodu Sözde Elementlerle Birlikte Kullanın

getComputedStyle(), sözde elementlerden (örneğin ::after, ::before, ::marker, ::line-marker) stil bilgisini çekebilir.

HTML :

<style>

 h3::before {
 
   content:'Merhaba ';
   
 }
</style>

<body>

<h3>javaScript</h3> 

</body>

javaScript:

var h3 = document.querySelector('h3'); 
  
var result = getComputedStyle(h3, ':before').content;

console.log('Eklenen içerik: ', result); // ÇIKTI: 'Merhaba'

Hesaplanan Değerler

getComputedStyle method bize hesaplanan değerleri gösterecektir. Misal genişlik % olarak belirtilmişse hesaplandıktan sonra "px" olarak sonuç göreceksiniz.

CSS :

.deneme{
     width:20%;

     height:calc(4 * 50px);

     padding: 30px;

     color:blue;

     border: 20px solid #BCBCBC;
     }

javascript :

 var el=document.querySelector(".deneme");
 
 var x= getComputedStyle(el).width;
 
 alert(x);

 
.stile{
  display:none;
}

function myFunction() {
  document.getElementById("img").className = "stile";
}