背景图片不会改变javascript

Question

我在HTML中设置了一个列表，如下所示：

HTML：

<ul id="move_2">
 <li id="mv_txt_2" >Move Section Up</li>
</ul> 
<button onClick="position();">change the bg_image</button>

CSS：

#move_2 {
    height:20px;
    background:url(../images/mvup.fw.png) no-repeat;
    padding-left:30px;
    margin-top:15px;
    vertical-align:middle;
    list-style:none;}


#mv_txt_2{
    padding-left:5px;
    cursor:pointer;
    font-size:14px;
    vertical-align:middle;}

但以下javascript不会更改背景图片：

function position(){
 document.getElementById('move_2').style.background='url(../images/mvdown.fw.png)';
}

我很感激收到任何意见来解决这个问题。

Answer 1

试试这个：

Fiddle

上的演示

HTML：

<ul id="move_2">
    <li id="mv_txt_2">Move Section Up</li>
</ul>
<button>change the bg_image</button>

CSS：

#move_2 {
    height:200px;
    background:url(http://istheapplestoredown.com/images/dashboardwidget.png) no-repeat;
    padding-left:30px;
    margin-top:15px;
    vertical-align:middle;
    list-style:none;
}
#mv_txt_2 {
    padding-left:5px;
    cursor:pointer;
    font-size:14px;
    vertical-align:middle;
}

的JavaScript：

$('li').click(function position() {
    document.getElementById('move_2').style.background = 'url(http://istheapplestoredown.com/images/websitewidget.png) no-repeat';
});

Answer 2

我认为../images可以在CSS中运行，因为你的CSS在一个目录中。使用html时，必须使用绝对路径。你试过了吗？

 document.getElementById('move_2').style.background='url(images/mvdown.fw.png)';

使用“onclick”代替onClick。

Answer 3

1. 您不应使用属性width capital words。
2. 你可以通过jquery使用它：

html：

 onclick="..."

jquery的：

 $(document).ready(function(){
     $("#move_2").css("background" , "yourAddress");
 });