js点击事件更换背景图片

JavaScript017

js点击事件更换背景图片,第1张

1：div22.style.background = "red"这样可以实现div22这个元素的背景颜色为红色。而div22添加的样式是内联样式。2：所以内联样式？你需要知道一下什么是内联样式。也就是这个元素本身的style属性中的css样式，这里的style属性中国的css样式权重值最高。3：在内联样式中，如果想要写一个背景图片那么就需要这样写才能生效：<div style="background-image：url('img/1.jpg')"></div>4：所以在js中动态添加或这更改背景图片就需要这样：div22.style.backgroundImage = "url('img/1.jpg')"5：对以上会打有哪里不理解的请指正或者追问

有两种比较直接的方式，

第一种方法：预先设置一个样式，然后在js中操作，给div加上这个class。

html代码：

-----

<div id="test"></div>

-----

预先设置一个样式：

-----

.bg {

background-image: url(xxx.jpg)

}

-----

然后js获取这个div，给div加上名为bg的class

-----

var div = document.getElementById('test')

div.className += ' bg'

-----

第二种方法，直接设置div的style属性：

-----

var div = document.getElementById('test')

div.style.backgroundImage = 'url(xxx.xxx)'

-----