Bu gönderi, HTML DOM Stili “backgroundImage” özelliğinin çalışmasını ve kullanımını kaleme alıyor.
JavaScript'te HTML DOM Stili “backgroundImage” Özelliği Nasıl Kullanılır?
HTML DOM stili ' arka plan görüntüsü ” özelliği, yoluna atıfta bulunarak bir arka plan resmi ekleyerek HTML öğesini ve belgeyi özelleştirmek için kullanılır.
Sözdizimi (“backgroundImage” Özelliğini Ayarlama)
nesne. stil . arka plan görüntüsü = 'url('URL')|yok|başlangıç|devral'Yukarıdaki sözdizimi, aşağıdaki 'backgroundImage' özellik değerlerini destekler:
- url('URL'): İstenen arka plan görüntüsünün konumunu belirtir.
- hiçbiri: Varsayılan değeri temsil eder, yani arka plan resmi yoktur.
- ilk: Tarayıcının varsayılan değerine benzer.
- miras: Özelliği üst öğesinden devralır.
Sözdizimi (“backgroundImage” Özelliğinin Dönen URL'si)
nesne. stil . arka plan görüntüsüBu sözdizimi, eklenen arka plan görüntüsünün URL'sini içeren dize değerini döndürür.
Style “backgroundImage” özelliğinin kullanımını açıklamak için yukarıda tanımlanan sözdizimlerini pratik olarak kullanalım.
Örnek 1: Arka Plan Görüntüsünü Ayarlamak için 'backgroundImage' Stili Özelliğini Uygulayın
Bu örnek ' stilini uygular. arka plan görüntüsü URL'sini belirterek istenen arka plan resmini belgeye ayarlamak için ” özelliği.
HTML Kodu
İlk olarak, belirtilen HTML koduna bir göz atın:
< h2 > Kullanmak HTML DOM stil JavaScript'te backgroundImage Özelliği h2 >
< tıklama düğmesi = 'benimFunc()' > Buraya tıklayın düğme >
Bu kodda:
- “ ” etiketi 2. seviyenin alt başlığını ekler.
- “
” etiketi, ekli bir düğme oluşturur “ tıklamada 'işlevi yürütmek için olay' benimFunc() ” butonuna tıklayın.
JavaScript Kodu
Ardından, verilen JavaScript kodunu izleyin:
< senaryo >işlev myFunc ( ) {
belge. vücut . stil . arka plan görüntüsü = 'url('./html&css/resim.jpg')' ;
}
senaryo >
Yukarıdaki kod parçacığında:
- “ adlı işlev benimFunc() ' tanımlanmış.
- Tanımında “ style.backgroundImage ' özellik belirtilenleri uygular ' URL ” görüntüsünü tüm belgenin arka planına ekleyin.
Çıktı
Çıktı, düğme tıklandığında arka plan görüntüsünün tüm belgeye eklendiğini gösterir.
Örnek 2: Arka Plan Görüntüsünün URL'sini Döndürmek için Stil 'backgroundImage' Özelliğini Uygulayın
“ arka plan görüntüsü ” özelliği, arka plan resminin URL'sini döndürmek için de yararlıdır. Uygulamalı olarak görelim.
HTML Kodu
İlk olarak, yazılı HTML kodunu gözden geçirin:
< h2 > Kullanmak HTML DOM stil JavaScript'te backgroundImage Özelliği h2 >< div kimliği = 'benimDiv' stil = 'yükseklik: 500 piksel; genişlik: 500 piksel;
kenarlık: 3px düz siyah;arka plan resmi:url('./html&css/image.jpg')' > Bu bir div'dir div >
< h4 kimliği = 'demo' > h4 >
Yukarıdaki kod bloğunda:
- “ arka plan görüntüsü ” özelliği, verilen URL'ye karşılık gelen bir arka plan resmi ekleyen “” öğesinde kullanılır.
- “ ” öğesi, eklenen arka plan görüntüsünün döndürülen değerini (URL) görüntüleyen 4. düzeyde boş bir alt başlık oluşturur.
JavaScript Kodu
Şimdi, JavaScript koduna ilerleyin:
< senaryo >
img izin ver = belge. getElementById ( 'benimDiv' ) . stil . arka plan görüntüsü ;
belge. getElementById ( 'demo' ) . içHTML = img ;
senaryo >Bu kod bloğunda:
- ' değişkenini bildirin img 'kullanan' Document.getElementById() '' öğesine kimliği 'myDiv' aracılığıyla erişmek için ' yöntemi ve ' aracılığıyla bir arka plan görüntüsü uygular. arka plan görüntüsü ' mülk.
- Ardından, 'document.getElementById()' yöntemi, eklenen arka plan görüntüsünün URL'sini görüntülemek için 'demo' kimliğini kullanarak boş alt başlığı getirir.
Çıktı
Çıktı, 'div' öğesine uygulanan arka plan görüntüsünün URL'sini görüntüler.
Çözüm
JavaScript, “ stilini kullanır arka plan görüntüsü Arka plan görüntüsünü istenen HTML öğesine atamak veya URL'sini döndürmek için ” özelliği. Arka plan görüntüsünü ayarlamak için 'ilk', 'devralın', 'URL' ve 'yok' dahil olmak üzere dört özellik değerini destekler. Ancak, arka plan resminin URL'sini almak için herhangi bir değeri desteklemez. Bu gönderi, JavaScript'te HTML DOM stili 'backgroundImage' özelliğini kullanmak için kısa bir açıklama sağladı.