js换背景图实例（js修改背景图片）

小蓝 • 2024-12-12 13:01 • 编程

本文目录一览：

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：对以上会打有哪里不理解的请指正或者追问

代码写起来比较烦，首先如果是要自动变化的话，你首先需要有一个timer，调用window.setInterval(handler,

time)方法去变换，可以写在onload事件里，或者卸载页面最后用scriptscript块里面

页面上有一个div的话，这个div里面应该有个img的吧，图片的话你用一个数组将文件名放起来，搞个随机数，然后就将img.src

‘arr[i]’；这样弄就应该能实现

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

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

1、首先需要一个作为背景的div，并给出ID或者class属性

2、当点击按钮时，将其属性进行一个背景添加，即可更换背景图片

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/244252.html