Как я могу изменить фоновое изображение с помощью функции JS? - PullRequest
Новая
       33

Как я могу изменить фоновое изображение с помощью функции JS?

0 голосов
/ 24 июня 2019

Мне нужно изменить фоновое изображение div, используя функцию onhover.

Я попробовал несколько итераций «document.getElementByID» без успеха 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="css/gallery.css">
    <script src = "js/gallery.js"></script>
</head>
<body>

    <div id = "image">
        Hover over an image below to display here.

    </div>

    <img class = "preview" alt = "Styling with a Bandana" src = 
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" 
onmouseover = "upDate(this)" onmouseout = "unDo()">

  </body>
</html>

Ниже приводится последняя функция, которую я пробовал: 

function upDate(previewPic){
  document.getElementById("image").body.backgroundImage = 
"url('img_bacon.jpg')";

Я ожидаю, что div будет включать фоновое изображение, но это не так.

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Это должно работать:

document.getElementById("image").style.backgroundImage = "url(someimage.jpg)";

Вы можете рассмотреть вопрос об использовании jquery .. тогда это будет выглядеть примерно так:

$('#image').css("background-image", "url(someimage.jpg)");

0 голосов
/ 24 июня 2019

Попробуйте использовать .innerhtml и передайте все, что хотите, чтобы тело было. 

document.getElementById("image").innerhtml = "<div>CONTENT HERE</div>"
...