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);


element.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 Nesne Methodu

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);

Gülsüm Kaya 03/09/2019

Merhaba,
 
.stile{
  display:none;
}

javascript:

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

şeklinde bir kod yazıyorum stilde sadece display:none özelliği çalışıyor başka özellik çalışmıyor js ye yeni başladım bu bir özelliği mi yoksa hata mı yapıyorum.

yönetici 03/09/2019

Gülsüm, class eklemek için şu konuya bakın.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

5974

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.