Как использовать переменную JS в стиле document.getElementById ().?
Я хочу сделать так, чтобы при перезагрузке страницы фон выбирался случайным образом.
function switchBG(urlThing) {
document.getElementById("bg-img").style.display = "block";
document.getElementById("bg-img").style.backgroundImage = "url(urlThing)";
}
var n = Math.floor((Math.random() * 2) + 1);
if (n == 1) {
switchBG('back1.jpg');
}
else if (n == 2) {
switchBG('back2.jpg')
}
Я попробовал, но ничего не вышло.
Обновлено: это div. Это первое, что находится под тегом.
<div id = "bg-img"></div>
@CertainPerformance означает это: "url(" + urlThing + ")"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно объединить переменную следующим образом:
document.getElementById("bg-img").style.backgroundImage = "url(" + urlThing + ")";
Это не работает
Также нужно выбрать ширину и высоту. В противном случае div пуст.
Я предполагаю, что bg-img - это тег <img>.
вот как ты можешь это сделать
function switchBG(urlThing) {
document.getElementById("bg-img").style.display = "block";
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
document.getElementById("bg-img").src=dir + urlThing;
}
bg-img - это <div>
Хорошо, тогда для div вы можете использовать document.getElementById("bg-img").style.backgroundImage = "url(" + urlThing + ")"; , также нажмите f12 и проверьте стили, загружено ли ваше изображение. если это так, вам нужно добавить css в этот div для отображения изображения попробуйте <style type = "text/css"> div { width: 400px; height: 400px; border: 1px solid black; } </style>
Это сработало, но как мне заставить div заполнять тело?
попробуйте изменить css, я дал этот css только для того, чтобы сделать img видимым.
если вы хотите, чтобы div заполнял тело, попробуйте <style type = "text/css"> #bg-img { width: 100vw; height: 100vh; } </style>
Большое спасибо!
Вам необходимо объединить переменную
urlThingс текстом стиляbackgroundImage. Как есть, вы просто помещаете его как буквальную строку, что не сработает.