Bu gönderi, JavaScript'teki pencere nesnesinin “getComputedStyle()” yönteminin amacını, çalışmasını ve kullanımını kaleme alıyor.
JavaScript'te Pencere Nesnesinin “getComputedStyle()” Yöntemi Ne İşe Yarar?
“ getComputedStyle() ” yöntemi, CSS özelliklerinin ve değerlerinin bir koleksiyonunu içeren “CSSStyleDeclaration” nesnesini döndürür. Hedeflenen HTML öğesi stil özelliklerini hesaplar. Ayrıca, HTML öğesinin belirli bir bölümünün biçimlendirme özelliklerinin hesaplanmasında da önemli bir rol oynar.
Sözdizimi
pencere. getComputedStyle ( eleman , sözde öğe )
Yukarıdaki sözdiziminde:
- pencere: Tarayıcı penceresini temsil eden global nesnedir.
- eleman: Stilinin hesaplanması gereken belirli HTML öğesini belirtir.
- sözde Öğe: Belirli bir HTML öğesinin örneğin ilk harf, son harf vb. bölümünü ifade eder.
Aşağıdaki bölüm, örnekler yardımıyla “getComputedStyle()” yönteminin pratik gösterimini gerçekleştirmektedir.
HTML Kodu (CSS Stili Dahil)
İlk olarak, aşağıdaki HTML koduna genel bir bakış yapın:
< KAFA >
< stil >
h3{
yazı tipi boyutu: 20px;
arka plan rengi:yeşilsarı
}
< / stil >
< / KAFA >
< vücut >
< h2 > Pencere Nesnesinin getComputedStyle() Yöntemini kullanın < / h2 >
< h3 İD = 'demo' > Verilen HTML öğesinin yazı tipi boyutu: < / h3 >
< P İD = 'örnek' >< / P >
Yukarıdaki kod satırlarında:
- “
” etiketi, “ öğesinin belirtilen stilini uygular. ”HTML öğesi. - İçinde '
” bölümünde, “ bölümünde bir alt başlık yer almaktadır. ” - Ardından, kimliği “ olan “
” öğesi gösteri ”, ikinci bir alt başlığı belirtir.
- Son olarak, “ ” etiketi, kimliği olan boş bir paragrafı ifade eder “ örnek ” hedeflenen öğenin hesaplanan CSS özelliklerini görüntülemek için.
Not: Bu HTML kodu, bu gönderinin belirtilen tüm örneklerinde izlenir.
Örnek 1: HTML Öğesinin Yazı Tipi Boyutunu Hesaplamak için “getComputedStyle()” Yöntemini Uygulama
Bu örnek, hedef HTML öğesinin yazı tipi boyutunu elde etmek için 'getComputedStyle()' yöntemini uygular.
JavaScript Kodu
Belirtilen JavaScript kodunu göz önünde bulundurun:
< senaryo >sabit eleman = belge. getElementById ( 'demo' ) ;
sabit nesne = pencere. getComputedStyle ( eleman )
boyuta izin ver = nesne getPropertyValue ( 'yazı Boyutu' ) ;
belge. getElementById ( 'örnek' ) . içHTML = boyut ;
senaryo >
Yukarıdaki kod parçacığında:
- Bir değişken bildirin ' eleman ” kullanan bir “const” anahtar kelimesiyle getElementById() '
' öğesine kimliği aracılığıyla erişmek için ' yöntemi ' gösteri ”.
- Bundan sonra, “ getComputedStyle() Getirilen “
” öğesinin CSS özelliklerini hesaplamak için ” yöntemi.
- Sonra, “ boyut ” değişkeni “ getPropertyValue() ' uygulanan CSS özelliğinin değerini döndüren yöntem ' yazı Boyutu ” bir dize olarak.
- Son olarak, 'getElementById()' yöntemi boş paragrafa erişir ve hesaplanan CSS özellik değerini ' içHTML ' mülk.
Çıktı
Görüldüğü gibi çıktı, uygulanan yazı tipi boyutu değerini karşılık gelen HTML öğesine, yani '
' karşı görüntüler.
Örnek 2: HTML Öğesinin Arka Plan Rengini Hesaplamak için 'getComputedStyle()' Yöntemini Uygulama
Bu örnekte, tartışılan yöntem, belirli HTML öğesinin arka plan rengini hesaplamak için kullanılır:
< senaryo >sabit eleman = belge. getElementById ( 'demo' ) ;
sabit nesne = pencere. getComputedStyle ( eleman )
bgcolor'a izin ver = nesne getPropertyValue ( 'arka plan rengi' ) ;
belge. getElementById ( 'örnek' ) . içHTML = bgcolor ;
senaryo >
Yukarıdaki kod bloğunda “ getComputedStyle() ” yöntemi şu değeri hesaplar: arka plan rengi id'si 'demo' olan ve değerini 'rgb' olarak döndüren '
' öğesinin ' getPropertyValue() ' yöntem.
Çıktı
Çıktı, getirilen HTML öğesinin hesaplanan arka plan rengini açıkça gösterir.
Çözüm
JavaScript, “ getComputedStyle() ” hedef HTML öğesinin CSS stil özelliklerini hesaplama yöntemi. Bu yöntemin hesaplanan değeri, CSS özelliklerini ve bunların değerlerini içeren bir dizedir. Herhangi bir HTML öğesinin CSS özelliklerini elde etmek için JavaScript kullanılarak farklı şekillerde uygulanabilir. Bu gönderi, JavaScript'teki pencere nesnesinin 'getComputedStyle()' yönteminin amacı, çalışması ve kullanımına ilişkin ayrıntılı bir görünüm sağladı.