How to change HTML background with JavaScript Func

2020-03-12 10:26发布

站内问答 / JavaScript
1475 6 4

How to change HTML background with JavaScript Function? I need some simple function to change background from one image to another?

6条回答
ら.Afraid
2楼-- · 2020-03-12 10:54

Try something like this:

function newBackGround (element,background) {
   element.style.backgroundImage = "url("+background+")";
}

newBackground (myElement,"newBackground.jpg");
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2020-03-12 10:58

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>
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
4楼-- · 2020-03-12 11:03

An alternative IFF using jquery

$("body").css("background-image", "url(/image.jpg)");
查看更多
0人赞 添加讨论(0) 举报
beautiful°
5楼-- · 2020-03-12 11:03

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

查看更多
0人赞 添加讨论(0) 举报
The star\"
6楼-- · 2020-03-12 11:03

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}")`;
查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
7楼-- · 2020-03-12 11:16 
function changeBGImage(whichImage){
     document.body.style.backgroundImage = "url(" + whichImage + ")";
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)