How to change HTML background with JavaScript Function? I need some simple function to change background from one image to another?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
Very simple like this:
function changeBGImage(){
document.body.background = "image.jpg";
}
Hope this helps you
UPDATE
Or if you wanna use CSS (more elegant solution) with it, you could use:
<style>
.bg1 {
background-image: url(images/my_image.jpg);
}
</style>
<body id="page_body">
<script>
function changeBGImage(whichImage){
document.getElementById('page_body').className="bg"+whichImage;
}
</script>
回答2:
An alternative IFF using jquery
$("body").css("background-image", "url(/image.jpg)");
回答3:
Try something like this:
function newBackGround (element,background) {
element.style.backgroundImage = "url("+background+")";
}
newBackground (myElement,"newBackground.jpg");
回答4:
demo codes:
element = document.querySelector("body");
element.style.backgroundImage = "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
elements = document.querySelectorAll("div");
for(let element of elements){
element.style.background = "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
}reference links:
http://www.w3schools.com/jsref/dom_obj_style.asp http://www.w3schools.com/jsref/prop_style_background.asp http://www.w3schools.com/jsref/prop_html_style.asp http://www.w3schools.com/jsref/met_document_queryselectorall.asp http://www.w3schools.com/jsref/met_document_queryselector.asp https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
回答5:
All of these answers change the body. The most direct way to change the html background is like so:
const imagePath = "/img/sub-folder/my-image.png";
document.documentElement.style.background = `url("${imagePath}")`;
回答6:
function changeBGImage(whichImage){
document.body.style.backgroundImage = "url(" + whichImage + ")";
}
