Bu kılavuz, JavaScript'teki HTML DOM Öğesi 'stil' özelliğinin amacını ve işleyişini ayrıntılı olarak açıklamaktadır.
HTML DOM Öğesi 'stil' Özelliği JavaScript'te Nasıl Çalışır?
HTML DOM'u ' stil ”, buna göre ayrılan stil özelliklerine göre çalışan salt okunur bir özelliktir. Ayrıca, “ CSSStyleBildirimi Belirli HTML öğesinin tüm satır içi stil özelliklerini içeren nesne.
Not: 'CSSStyleDeclaration' nesnesi, baş bölümünde tanımlanan CSS stil niteliklerini içerir.
Sözdizimi (Bir stil Özelliği belirleyin)
öğe. stil . mülk = değerYukarıdaki sözdizimine göre, “ stil 'özellik yalnızca bir parametreyi destekler' değer ”, belirtilen stil özelliğinin değerini temsil eder.
Sözdizimi (Bir stil Özelliği döndürür)
öğe. stil . mülk“style” özelliğinin yukarıda bahsedilen sözdizimlerini uygulamalı olarak uygulayalım.
Örnek 1: Belirli Bir HTML Öğesinin Rengini Ayarlamak için 'style' Özelliğini kullanın
Bu örnek, ' temel sözdizimini uygular. stil 'style' özelliğinin değerini, belirli HTML öğesinin rengi değişecek şekilde ayarlamak için.
HTML Kodu
İlk olarak, verilen HTML kodunu gözden geçirin:
< h2 > JavaScript'te style Özelliğini kullanın h2 >
< h3 kimliği = 'H3' > İkinci Alt Başlık. h3 >
Yukarıdaki kod satırlarında:
- “ ” HTML etiketi ilk alt başlığı belirtir.
- “ ” etiketi, “H3” atanmış bir id ile 3. seviyenin ikinci alt başlığını oluşturur.
JavaScript Kodu
Ardından, belirtilen JavaScript kodunu izleyin:
< senaryo >belge. getElementById ( 'H3' ) . stil . renk = 'yeşil' ;
senaryo >
Yukarıdaki kod parçacığında, “ Document.getElementById() ” yöntem dahil edilene erişir “ 'kimliği aracılığıyla öğe' H3 ” belirtileni ayarlamak için “ renk 'aracılığıyla öğenin öznitelik değeri' stil.renk ' mülk.
Çıktı
Çıktı, hedeflenen HTML öğesinin görsel temsilinin 'style' özelliği kullanılarak uygun şekilde ayarlandığını gösterir.
Örnek 2: Uygulanan 'style' Özniteliğinin Değerini Almak için 'style' Özelliğini kullanın
Bu örnekte, 'style' özelliği, genelleştirilmiş sözdizimini kullanarak HTML öğesinin atanmış 'style' özniteliğini bulmaya yardımcı olur (Stil Özelliği Döndür).
HTML Kodu
HTML kodu burada belirtilmiştir:
< h2 > JavaScript'te style Özelliğini kullanın h2 >< h3 kimliği = 'H3' stil = 'arka plan rengi: turuncu;' > İkinci alt başlık arka plan renginin değeri, : h3 >
< h4 kimliği = 'demo' > h4 >
Bu kodda:
- “ ” HTML etiketi, “
” HTML öğesinin arka plan rengini ayarlayan “style” özelliğini kullanır.
- “ ” etiketi, bir kimliğe sahip 4. seviye boş bir alt başlık oluşturur” gösteri ”.
JavaScript Kodu
Şimdi, verilen JavaScript koduna bakın:
< senaryo >sabit değer = belge. getElementById ( 'H3' ) . stil . arka plan rengi ;
belge. getElementById ( 'demo' ) . içHTML = değer ;
senaryo >
Yukarıda yazılan kodda:
- Değişken ' değer ”, “ ile ilan edilir. sabit ' için geçerli anahtar kelime' Document.getElementById() Uygulanan 'style' özniteliğinin değerini almak ve bunu 'style' özelliği aracılığıyla '
' öğesine uygulamak için kimliğini kullanarak '
' öğesini getirme yöntemi.
- “document.getElementById()” yöntemi, eklenen boş “
” öğesine erişmek ve ayrılan “style” özniteliğinin değerini getirilen HTML öğesine karşı görüntülemek ve bunu “aracılığıyla bir alt başlık olarak eklemek için tekrar kullanılır. içHTML ' mülk.
Çıktı
Çıktı, öğeye arka plan rengini uygular ve set 'style' özniteliğinin değeri de buna göre döndürülür.
Çözüm
JavaScript “ stil HTML DOM öğesinin satır içi 'stil' özelliklerini atamak ve döndürmek için ' özelliği. İstenen işlevselliği buna göre uygulamak için ek bir 'değer' gerekir. Ayarlama ve alma dışında, mevcut 'stil' özelliğini değiştirmek de faydalıdır. Bu kılavuz, HTML DOM Öğe stili Özelliğinin ana amacını, çalışan ve pratik uygulamasını gösterdi.