Изменение фонового изображения элемента html js
Я искал в Google и здесь, но я не могу найти правильный ответ на свою проблему. Я использовал этот код:
html {
background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
который я получил из Интернета, чтобы установить фоновое изображение, которое всегда находится в центре и идеально вписывается в браузер, и оно отлично работает, но я столкнулся с проблемой. Мне нужно изменить фоновое изображение одним нажатием кнопки, но я не знаю, как настроить таргетинг на тег html, возможно ли это? огромное спасибо :)
мой вопрос был помечен как дубликат, но моя проблема - это не просто получить стиль элемента html, но изменить его так же, как фрагмент кода, используя только чистый javascript
"javascript get html element", введенный в Google, мог привести вас к этому дубликату напрямую.
Пожалуйста, включите код, который вы пробовали, он дает нам больше контекста относительно того, чего вы пытаетесь достичь, и упрощает определение того, где вы можете ошибиться.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Просто используйте:
document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";
Слишком быстрый ответ, исправил :)
это не сработало, новое изображение просто помещается в угол, а не на весь экран
@kriskotooBG, может, попробуй: document.getElementsByTagName('html')[0].style.background = "url('img.png') no-repeat center center fixed";
С помощью jquery вы можете сделать следующее
$('html').on('click', function(){
$('html').css({
"background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
"background-size": "cover"
});
});
извините, но я не просил решение jquery
тогда вы можете просто добавить два разных стиля с помощью javascript ---- document.getElementsByTagName ('html') [0] .style.backgroun d = "url ('picsum.photos/1200/3300/?blur ') центр центра без повтора исправлен"; document.getElementsByTagName ('html') [0] .style.backgroundSiz e = 'обложка';
Вы должны установить оба свойства backgroundImage и backgroundSize. Попробуйте следующее:
document.querySelector('#btnSetImage').addEventListener('click', function(){
var html = document.querySelector('html');
html.style.backgroundImage = "url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
html.style.backgroundSize = 'cover';
});<button type = "button" id = "btnSetImage">Set Background Image</button>Вы можете получить доступ к элементу html напрямую с documentElement:
/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});/*Base settings in CSS*/
html {
background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
/*This Would be a greyscale image*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}<div style = "color:#FFF;">Bill Murray!</div>
<!-- Just Some Content -->
<button id = "changeImage">ChangeImage</button>
Возможный дубликат Как получить HTML-тег <html> с помощью JavaScript / jQuery?