在“js”中怎么设置div的背景图片？

JavaScript08

在“js”中怎么设置div的背景图片？,第1张

有两种比较直接的方式，

第一种方法：预先设置一个样式，然后在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)'

-----

background是全局的背景设置，例如

body {

    background: #fff url('xxx.png') no-repeat

}

拆分出来就是

body {

    background-color: #fff

    background-image: url('xxx.png')

    background-repeat: no-repeat

}

你设置了obj.style.background就覆盖了background-image，所以你要改成这样

obj.style.backgroundImage = 'url("xxx.png")'

首先确认你是怎么为这个div应用背景的,是用css的外联还是内嵌方式? 如果是内嵌方式,就很容易获取了.

比如:

<div id="mydiv" style="background:url(images/bg.jpg)">...</div>

js:

var oDiv=document.getElementById("mydiv")

var oBg=oDiv.getAttribute("style")

//这个oBg就是style属性了,取得的为background:url(images/bg.jpg)

然后再载取字符串,把images/bg.jpg ,这个步骤就不用我说了吧.