Тази публикация описва работата и използването на свойството „backgroundImage“ на HTML DOM стил.
Как да използвам свойството „backgroundImage“ на HTML DOM стил в JavaScript?
Стилът HTML DOM “ backgroundImage ” Свойството се използва за персонализиране на HTML елемента и документа чрез добавяне на фоново изображение чрез позоваване на неговия път.
Синтаксис (Задаване на свойството „backgroundImage“)
обект. стил . backgroundImage = 'url('URL')|няма|първоначално|наследяване'Горният синтаксис поддържа следните стойности на свойство „backgroundImage“:
- url('URL'): Той определя местоположението на желаното фоново изображение.
- нито един: Той представлява стойността по подразбиране, т.е. без фоново изображение.
- първоначално: Подобно е на стойността по подразбиране на браузъра.
- наследявам: Той наследява свойството от своя родителски елемент.
Синтаксис (Връщащ URL адрес на свойството „backgroundImage“)
обект. стил . backgroundImageТози синтаксис връща стойността на низа, съдържащ URL адреса на добавеното фоново изображение.
Нека използваме практически дефинирания по-горе синтаксис, за да обясним използването на свойството на стила „backgroundImage“.
Пример 1: Приложете свойството на стила „backgroundImage“, за да зададете фоново изображение
Този пример прилага стила ' backgroundImage ”, за да зададете желаното фоново изображение на документа, като посочите неговия URL адрес.
HTML код
Първо, погледнете посочения HTML код:
< h2 > Използвайте HTML DOM стил Свойство backgroundImage в JavaScript h2 >
< бутон при щракване = 'myFunc()' > Натисни тук бутон >
В този код:
- „ ” добавя подзаглавие от ниво 2.
- „ <бутон> ' таг създава бутон с прикачен ' onclick ” събитие за изпълнение на функцията ” myFunc() ” при натискане на бутона.
JavaScript код
След това следвайте дадения JavaScript код:
< сценарий >функция myFunc ( ) {
документ. тяло . стил . backgroundImage = 'url('./html&css/image.jpg')' ;
}
сценарий >
В горния кодов фрагмент:
- Функцията с име „ myFunc() ” е дефинирано.
- В своята дефиниция „ style.backgroundImage ” свойство прилага указаното “ URL адрес ” изображение на фона на целия документ.
Изход
Резултатът показва, че фоновото изображение се добавя към целия документ при натискане на бутон.
Пример 2: Прилагане на свойството на стил „backgroundImage“ за връщане на URL адреса на фоновото изображение
„ backgroundImage ” също е полезно за връщане на URL адреса на фоновото изображение. Нека го видим практически.
HTML код
Първо прегледайте писмения HTML код:
< h2 > Използвайте HTML DOM стил Свойство backgroundImage в JavaScript h2 >< div id = 'myDiv' стил = 'височина: 500px; ширина: 500px;
граница: плътно черно 3px;background-image:url('./html&css/image.jpg')' > Това е div див >
< h4 id = 'демонстрация' > h4 >
В горния кодов блок:
- „ backgroundImage ” се използва в елемента „”, който добавя фоново изображение, съответстващо на дадения URL адрес.
- „ ” създава празно подзаглавие от ниво 4, което показва върнатата стойност (URL) на добавеното фоново изображение.
JavaScript код
Сега преминете към JavaScript кода:
< сценарий >
нека img = документ. getElementById ( 'myDiv' ) . стил . backgroundImage ;
документ. getElementById ( 'демонстрация' ) . innerHTML = img ;
сценарий >В този кодов блок:
- Декларирайте променливата ' img ”, който използва „ document.getElementById() ” за достъп до елемента „” чрез неговия идентификатор „myDiv” и прилага фоново изображение чрез „ backgroundImage ' Имот.
- След това методът „document.getElementById()“ извлича празното подзаглавие, използвайки неговия идентификатор „demo“, за да покаже URL адреса на добавеното фоново изображение.
Изход
Резултатът показва URL адреса на фоновото изображение, приложено към елемента „div“.
Заключение
JavaScript използва стила „ backgroundImage ” свойство за присвояване на фоновото изображение на желания HTML елемент или връщане на неговия URL адрес. Той поддържа четири стойности на свойства за задаване на фоновото изображение, включително „начално“, „наследяване“, „URL“ и „няма“. Той обаче не поддържа никаква стойност за получаване на URL адреса на фоновото изображение. Тази публикация предостави кратко описание за използване на свойството „backgroundImage“ в стил HTML DOM в JavaScript.