JavaScript'te, genellikle arayüzler için daha iyi çalışan koyu arka planlar gibi çekici bir düzene ihtiyaç duyan web sayfaları vardır. Benzer şekilde, beyaz arka planlar okuyucuların içeriğe odaklanmasını sağlar ve bu nedenle haber portalları veya bloglar koyu metinle nispeten açık bir arka plan kullanır. Bu gibi durumlarda JavaScript, belge tasarımını biçimlendirme ve geliştirmede çok kullanışlı hale gelir.
Bu makale, JavaScript'te arka plan görüntüsünü değiştirme yöntemlerini tartışacaktır.
JavaScript'te Arka Plan Resmi Nasıl Değiştirilir?
JavaScript'te arka plan resmini değiştirmek için aşağıdaki yaklaşımlar kullanılabilir:
- “ arka plan görüntüsü ” üzerinde mülk” DOM ”.
- “ getElementById() 'yöntem ve' arka plan görüntüsü ” üzerinde mülk” paragraf ”.
Tartışılan yöntemleri tek tek gözden geçirin!
Yöntem 1: JavaScript'te Arka Plan Görüntüsünü DOM'da backgroundImage özelliğini kullanarak değiştirin.
“ arka plan görüntüsü ” özelliği, belirtilen öğenin arka plan görüntüsünü ayarlar. Bu teknik, backgroundImage özelliği uygulanarak ve yolunu bir argüman olarak bularak arka plan görüntüsünü belirterek uygulanabilir.
Sözdizimi
Yukarıdaki sözdiziminde, ' URL ” görüntünün yolunu ifade eder.
Gösteri için aşağıdaki örneğe bakın.
Örnek
Bu örnekte, belirtilen değere sahip bir düğme ve “ tıklamada ” olayına yönlendirme
backgroundImage() adlı işlev:
Şimdi, bir işlev ' arka plan görüntüsü() ” ilan edilecek ve “ Document.body.style.backgroundImage ” özelliği, bağımsız değişkeninde belirtilen görüntü yolunu kullanarak arka plan görüntüsüne erişecektir:
Yukarıdaki uygulamanın çıktısı aşağıdaki gibi sonuçlanacaktır:
Yöntem 2: Paragrafta getElementById() yöntemini ve backgroundImage özelliğini kullanarak JavaScript'te Arka Plan Resmini Değiştirin
“ getElementById() ” yöntemi, belirtilen bir değere sahip bir öğe döndürür ve “ arka plan görüntüsü ” özelliği, yukarıda belirtildiği gibi, bağımsız değişkeninde belirtilen belirli öğenin arka plan görüntüsünü döndürür. Bu yöntem, belirli bir paragrafın arka planında belirtilen rengi eşleştirmek için uygulanabilir.
Sözdizimi
Burada, ' elementler ”, bir öğenin kimliğini ifade eder.
Belirtilen kavramı daha iyi anlamak için aşağıdaki örneği inceleyin.
Örnek
İlk olarak,
etiketine bir paragraf ekleyin ve ona belirli bir kimlik atayın:
Ardından, önceki yöntemde tartışıldığı gibi backgroundImage() işlevine erişen bir onclick olayıyla bir düğme oluşturun:
Son olarak, “ adlı işlevi bildirin. arka plan görüntüsü() ' benzer şekilde. Burada, “kullanarak tanımlanan Id'ye erişin. getElementById() ” yöntemini seçin ve üzerine belirtilen arka plan resmini uygulayın. Bu, rengin paragrafın arka planında uygulanmasına neden olur:
Çıktı
Javascript'te arka plan görüntüsünü değiştirmenin en kolay yöntemini derledik
Çözüm
Javascript'te arka plan resmini değiştirmek için “ arka plan görüntüsü ” üzerinde mülk” DOM ” belirtilen arka plan resmini bir işlev kullanarak tüm web sayfasına uygulamak veya ' kullanarak belirli kimliği almak için getElementById() “yöntem ve uygulama” arka plan görüntüsü ”belirtilen mülkte” paragraf ”. Bu blog, JavaScript'te arka plan resimlerini değiştirme yöntemlerini gösterir.