Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/amazon-s3/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
CSS背景样式在使用JavaScript更改背景后停止工作_Javascript_Html_Css - Fatal编程技术网

CSS背景样式在使用JavaScript更改背景后停止工作

CSS背景样式在使用JavaScript更改背景后停止工作,javascript,html,css,Javascript,Html,Css,我正在使用一个脚本在我的站点上经过一段时间后自动更改背景图像。一切正常,但在更改为新的背景图像后,我必须再次在JavaScript中添加背景样式,因为css文件中的背景样式在此之后立即停止工作 只有transition:2s仍然有效,因此我必须再次在JavaScript中添加所有背景样式 但是,在JavaScript中添加背景样式会使屏幕在每次背景更改时闪烁。因此,如果可能的话,我正在寻找解决方案 const body=document.querySelector('body'); body.

我正在使用一个脚本在我的站点上经过一段时间后自动更改背景图像。一切正常,但在更改为新的背景图像后,我必须再次在JavaScript中添加背景样式,因为css文件中的背景样式在此之后立即停止工作

只有
transition:2s
仍然有效,因此我必须再次在JavaScript中添加所有背景样式

但是,在JavaScript中添加背景样式会使屏幕在每次背景更改时闪烁。因此,如果可能的话,我正在寻找解决方案

const body=document.querySelector('body');
body.style.background='url(“new_bg”);
body.style.backgroundRepeat='no repeat';
body.style.backgroundSize='100%';
body.style.backgroundAttachment='fixed'
正文{
背景:url(“bg”);
背景重复:无重复;
背景大小:100%;
背景附件:固定;
过渡:2s;

}
这里发生的事情是每次调用脚本时都会重置整个背景样式

这两条线是不同的:

.someClass{
背景图像:url(“”);
}
.某个班级{
背景:url(“”);
}
第一个示例仅重置背景图像。第二个选项重置背景上的每个属性,因为您使用的是
background
速记


如果您只是在javascript中重置
背景图像
,它不会重置所有其他内容。

我为您制作了一个片段。请编辑它,使其成为一个Javascript代码有一个错误,请将背景url作为字符串。请注意特定的权重。JS将应用内联样式,该样式与css具有更高的特异性,并且将始终覆盖它们(除非使用了
!important
)kitten@mplungjan谢谢。现在我明白为什么会这样了。谢谢你的帮助。我还发现使用!重要的问题也解决了我的问题,但你的回答完美地解释了它。