JSJquery，如何实现背景图片的更换

JavaScript023

JSJquery，如何实现背景图片的更换,第1张

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

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的理念，同时第二种可以实现背景图片不断替换，而第一种不行

body {background:url(bg.jpg) top center no-repeatbackground-size:cover}这样的话背景图片就会填充整个屏幕了不过要说明的是，这是一个CSS3的属性，在很多浏览器里面都是不被支持的，你所希望的效果，目前来看，只有这个属性可以做到，否则就只能用一个足够大的图片做背景的方法来实现了。另外 background-size:cover还可以替换成 background-size:contain使用cover的意思是把背景图片充满整个容器，而不考虑是不是可以看到完整的图片；使用contain的意思是在容器里完整显示图片，而不考虑容器是否被填满。

<script type="text/javascript" language="javascript">

document.getElementById("form1").style.backgroundImage = "目标图片"

</script>