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

JavaScript026

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

有两种比较直接的方式，\x0d\x0a\x0d\x0a第一种方法：预先设置一个样式，然后在js中操作，给div加上这个class。\x0d\x0ahtml代码：\x0d\x0a-----\x0d\x0a\x0d\x0a\x0d\x0a-----\x0d\x0a\x0d\x0a预先设置一个样式：\x0d\x0a-----\x0d\x0a.bg {\x0d\x0a background-image: url(xxx.jpg)\x0d\x0a}\x0d\x0a-----\x0d\x0a\x0d\x0a然后js获取这个div，给div加上名为bg的class\x0d\x0a-----\x0d\x0avar div = document.getElementById('test')\x0d\x0adiv.className += ' bg'\x0d\x0a-----\x0d\x0a\x0d\x0a第二种方法，直接设置div的style属性：\x0d\x0a\x0d\x0a-----\x0d\x0avar div = document.getElementById('test')\x0d\x0adiv.style.backgroundImage = 'url(xxx.xxx)'\x0d\x0a----- 回答于 2022-11-16

如果你的图片是用img插入的，那么就在js中控制img标签的宽高；

如果图片是以背景插入的，那你应该用一个class来控制容器的样式。

当然如果你容器是固定宽高的话，最好的办法就是制作等大小的图片。同时css中有个backgroud-size可以很好来缩放背景图片。

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

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