jquery如何改变css背景图?

JavaScript013

jquery如何改变css背景图?,第1张

jquery改变CSS背景图修改方法

如果需要使用Jquery修改CSS网页背景样式。用户可以这样写$(‘p’).css({"background-image":"url(../images/msg_btn.gif"})

Jquery-CSS用法

css() 方法返回或设置匹配的元素的一个或多个样式属性。返回第一个匹配元素的 CSS 属性值。注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

参考资料：JQuery

更换背景图片有两种方式：

1、直接给元素附加css，因为js附加的css样式要比css中的样式权限高，那么js设置的背景图片就会覆盖之前的图片

$(this).css("background","url(1.jpg) no-repeat 0 0")

2、写两个class，一个class里面写一个背景图片，js中操作的话直接改变元素的class就可以了

$(this).removeClass('classA').addClass('classB')

相对而言，第二种方式更好一点，实现了js中尽量不书写css的理念，同时第二种可以实现背景图片不断替换，而第一种不行

我代码没有问题啊，我本地测试都能通过，你检查一下你图片路径是否正确。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=UTF-8"> 

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 

<style type="text/css">

/*按星期查询*/

.week { margin-top:16px}

.week a{ text-decoration:none }

.week li:hover { color: #abc}

.f14_50_c3{ font:14px/40px "微软雅黑" color:#333}

.f14_50_c3:hover{ color:#AE7629}

.f12_36_cl{ font:12px/22px "宋体" color:#fff}

 

.a{background-image: url(images/1.png)}

</style>

<script>

$(function(){

    $("#week ul a li").click(function(){

        $("#week ul a li p").removeClass("a")

        $(this).find("p").addClass("a")

    })

})

function change(i){

     

}

</script>

</head> 

<body> 

<div class="week" id = "week">

    <ul>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期一</p></li></a>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期二</p></li></a>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期三</p></li></a>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期四</p></li></a>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期五</p></li></a>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期六</p></li></a>

        <a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期日</p></li></a>

    </ul>

</div>

</body> 

</html>

效果如下：