Овај пост описује рад и употребу својства „бацкгроундИмаге“ ХТМЛ ДОМ стила.
Како користити својство „бацкгроундИмаге“ ХТМЛ ДОМ стила у ЈаваСцрипт-у?
ХТМЛ ДОМ стил “ позадинска слика ” својство се користи за прилагођавање ХТМЛ елемента и документа додавањем позадинске слике упућивањем на његову путању.
Синтакса (подешавање својства „бацкгроундИмаге“)
објекат. стил . позадинска слика = 'урл('УРЛ')|нема|почетног|наслеђивања'Горња синтакса подржава следеће вредности својства „бацкгроундИмаге“:
- урл('УРЛ'): Он одређује локацију жељене позадинске слике.
- ниједан: Представља подразумевану вредност, тј. нема позадинске слике.
- почетни: Слично је подразумеваној вредности претраживача.
- наследити: Наслеђује својство од свог родитељског елемента.
Синтакса (повратна УРЛ адреса својства „бацкгроундИмаге“)
објекат. стил . позадинска сликаОва синтакса враћа вредност стринга која садржи УРЛ додате слике у позадини.
Хајде да користимо горе дефинисане синтаксе практично да објаснимо употребу својства „бацкгроундИмаге“ стила.
Пример 1: Примените својство стила „бацкгроундИмаге“ да бисте поставили позадинску слику
Овај пример примењује стил „ позадинска слика ” да бисте поставили жељену позадинску слику за документ тако што ћете навести његову УРЛ адресу.
ХТМЛ код
Прво погледајте наведени ХТМЛ код:
< х2 > Користи ХТМЛ ДОМ Стиле бацкгроундИмаге Својство у ЈаваСцрипт-у х2 >
< дугме онцлицк = 'миФунц()' > Кликните овде дугме >
У овом коду:
- „ <х2> ” ознака додаје поднаслов нивоа 2.
- „ <дугме> ” ознака креира дугме са приложеним “ онцлицк ” догађај за извршавање функције “ миФунц() ” након клика на дугме.
ЈаваСцрипт код
Затим пратите дати ЈаваСцрипт код:
< скрипта >функција миФунц ( ) {
документ. тело . стил . позадинска слика = 'урл('./хтмл&цсс/имаге.јпг')' ;
}
скрипта >
У горњем исечку кода:
- Функција под називом „ миФунц() ' је дефинисан.
- У својој дефиницији, „ стиле.бацкгроундИмаге ” својство примењује наведено „ УРЛ ” слику на позадину целог документа.
Излаз
Излаз показује да се позадинска слика додаје целом документу након клика на дугме.
Пример 2: Примените својство стила „бацкгроундИмаге“ да бисте вратили УРЛ позадинске слике
„ позадинска слика ” својство је такође корисно за враћање УРЛ-а позадинске слике. Да видимо то практично.
ХТМЛ код
Прво, прођите кроз писани ХТМЛ код:
< х2 > Користи ХТМЛ ДОМ Стиле бацкгроундИмаге Својство у ЈаваСцрипт-у х2 >< див ид = 'миДив' стил = 'висина: 500 пиксела; ширина: 500 пиксела;
граница: 3пк пуна црна;бацкгроунд-имаге:урл('./хтмл&цсс/имаге.јпг')' > Ово је див див >
< х4 ид = 'демо' > х4 >
У горњем блоку кода:
- „ позадинска слика ” својство се користи у елементу „<див>” који додаје слику у позадини која одговара датој УРЛ адреси.
- „ <х4> ” елемент креира празан поднаслов нивоа 4 који приказује враћену вредност (УРЛ) додате слике у позадини.
ЈаваСцрипт код
Сада пређите на ЈаваСцрипт код:
< скрипта >нека имг = документ. гетЕлементБиИд ( 'миДив' ) . стил . позадинска слика ;
документ. гетЕлементБиИд ( 'демо' ) . иннерХТМЛ = имг ;
скрипта >
У овом блоку кода:
- Објавите променљиву „ имг ” који користи „ доцумент.гетЕлементБиИд() ” за приступ елементу „<див>” преко његовог ИД-а „миДив” и примењује позадинску слику преко „ позадинска слика ' имовина.
- Затим, метода „доцумент.гетЕлементБиИд()“ преузима празан поднаслов користећи свој ид „демо“ да би приказао УРЛ приложене позадинске слике.
Излаз
Излаз приказује УРЛ позадинске слике примењене на елемент „див“.
Закључак
ЈаваСцрипт користи стил „ позадинска слика ” својство за додељивање позадинске слике жељеном ХТМЛ елементу или враћање његове УРЛ адресе. Подржава четири вредности својстава за постављање позадинске слике укључујући „почетно“, „наслеђивање“, „УРЛ“ и „ништа“. Међутим, не подржава никакву вредност за добијање УРЛ-а позадинске слике. Овај пост је дао кратак опис коришћења својства „бацкгроундИмаге“ у ХТМЛ ДОМ стилу у ЈаваСцрипт-у.