js设置背景图片（javascript添加背景图片）

本文目录

• javascript添加背景图片
• jsp中js实现点击按钮更改背景图片
• 关于用js改变td背景图片的
• JavaScript如何修改body中对背景图片的设置
• fullpage.js怎么设置背景图
• js点击ul中某个li标签,改变这个li标签的背景图,当点击其它li标签时前一个被点击的标签背景
• 关于JS脚本中，单击后重新给DIV设置背景图片~
• js如何实现刷新网页更换背景图

javascript添加背景图片

《script type="text/javascript"》
window.onload=function(){
document.getElementById(’test’).onclick=function(){
***隐藏网址***
}
}
《/script》
《body》
《a href="#" id="test"》click here《/a》
《/body》

jsp中js实现点击按钮更改背景图片

《script》
function mychange(num){
document.getElementById("div1").style.backgroundImage="url("+num+".jpg)";
document.getElementById("div2").style.backgroundImage="url("+num+".jpg)";
}
《/script》
《/head》
《body》
《div id="div1" style="height:200px; width:200px; background:#FF0000"》这是第一个div《/div》
《div id="div2" style="height:200px; width:200px; background:#0000FF"》这是第二个div《/div》
《input type="button" value="第一个按钮" onclick="mychange(1)" /》
《input type="button" value="第二个按钮" onclick="mychange(2)" /》
《input type="button" value="第三个按钮" onclick="mychange(3)" /》
《/body》

关于用js改变td背景图片的

1、用JS定义一个图片数组，里面存放你想要随机展示的图片
2、用JS产生一个随机数，当然这个随机数从0开始到imgArr.length-1结束
代码如下:
var index =parseInt(Math.random()*(imgArr.length-1));
就得到当前随机产生的图片
代码如下:
var currentImage=imgArr;
3、既然随机产生了一张背景图，那就用JS把这个图片作为背景图。
代码如下:
document.getElementById("BackgroundArea").style.backgroundImage="url("+currentImage+")";
由于这是一个demo，所以在页面上定义了一个id为BackgroundArea的div，同时也是为这个div设置随机背景的。
代码如下:
《div id="BackgroundArea"》
《/div》

JavaScript如何修改body中对背景图片的设置

因为 body 是一个标签元素，并不是在某个元素上设置的id，所有通过 document.getElementById(’body’) 是获取不到对应元素的，你改成下面的代码试试
document.getElementsByTagName(’body’).style.backgroundImage=’url(context/black.png)’;

fullpage.js怎么设置背景图

目的: 设置背景图

工具: fullpage.js

引用:

《script src="jquery-1.8.3.min.js"》《/script》    
《script src="jquery.fullPage.min.js"》《/script》

参考代码:

《html lang="zh-CN"》    
《head》    
《meta charset="utf-8"》    
《title》fullPage.js — 背景演示_dowebok《/title》    
《link rel="stylesheet" href="css/jquery.fullPage.css"》    
《style》 
/*设置不同的背景图片*/   
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #00ff00;}    
.section1 { background: url(images/bg1.jpg) 50%;}    
.section2 { background: url(images/bg2.jpg) 50%;}    
.section3 { background: url(images/bg3.jpg) 50%;}    
.section4 { background: url(images/bg4.jpg) 50%;}    
《/style》    
《script src="jquery-1.8.3.min.js"》《/script》    
《script src="jquery.fullPage.min.js"》《/script》    
《script》  
//执行滚动事件,加载不同的背景图片  
$(function(){    
$(’#dowebok’).fullpage();    
});    
《/script》    
《/head》    
《body》    
《div id="dowebok"》    
《div class="section section1"》欢迎来到我的空间《/div》    
《div class="section section2"》在这里我将展示不同以往的一面《/div》    
《div class="section section3"》展示我的知识《/div》    
《div class="section section4"》也展示我的青春《/div》    
《/div》    
《/html》

js点击ul中某个li标签,改变这个li标签的背景图,当点击其它li标签时前一个被点击的标签背景

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用ul和li标签创建一个列表，li的值分别为测试a，测试b。

3、在test.html文件内，设置第一个li标签的id为mytest，主要用于下面通过该id获得li对象。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“改变li的值”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行editli（）函数。

6、在js标签中，创建editli()函数，在函数内，使用getElementById（）方法通过id(mytest)获得li对象，给该li对象的innerHTML属性重新赋值，实现改变li标签的值。

关于JS脚本中，单击后重新给DIV设置背景图片~

你好：
我把楼上的改了下，看看是不是你要的
提示：把代码保存为a.htm即可预览效果
《script》
function setDivBG(s)
{
document.getElementById("div1").className=s;
}
《/script》
《head》
《style type="text/css"》
.style1
{

width: 100px;
height: 100px;
***隐藏网址***
}
.style2
{

width: 100px;
height: 100px;
***隐藏网址***
}
《/style》
《/head》
《BODY 》
《select onchange="setDivBG(this.value);"》
《option value="style1"》知道《/option》
《option value="style2"》头像《/option》
《/select》
《div id="div1" class="style2" 》
《/div》
《/BODY》

js如何实现刷新网页更换背景图

 《!DOCTYPE html》
《html lang="en"》
《head》
    《meta charset="UTF-8"》
    《meta name="viewport" content="width=device-width, initial-scale=1.0"》
    《title》Document《/title》
    《style》
        html{
            height: 100%;
        }
        body {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 100%;
        }
    《/style》
《/head》
《body》
《/body》
《script》
***隐藏网址***
    let num = 0;
    let setNum = localStorage.getItem("num");
    if (setNum) {
        num = setNum
    }
    console.log(imgArr);
    document.body.style.backgroundImage = "url(" + imgArr + ")"
    if (num == imgArr.length - 1) {
        num = 0;
    } else {
        num++;
    }
    localStorage.setItem("num", num)
《/script》
《/html》

 请采纳