1：CSS特异性

Question

请参阅下面的CSS，我想更改＆＃34;背景：网址＆＃34;部分动态使用javascript。

div{
    background: url('pinkFlower.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    float:left;
}

我通过传递以下javascript

尝试了同样的方法

document.querySelector('div').style.background= "url('pinkFlower.jpg') no-repeat fixed";

这导致了我原来的css的目的。

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

我认为这应该有效：

document.querySelector('div.image').style.backgroundImage = 'url("your/url/to/the/file")';

编辑：诀窍：如果你在Chrome上，请启动webdev面板（F12）并在控制台中写入 console.log(document.querySelector('div.image').style)

您将获得“样式”对象的所有属性，然后您可以根据需要更改

Answer 2

要了解这里发生了什么，您需要了解两件事：CSS特异性和CSS background-属性。

1：CSS特异性

您遇到的主要问题是在Javascript中使用.style=[something]会将新样式写入HTML style="[something]"属性。不覆盖浏览器的CSS缓存版本，因此，与您正在更改的属性相关的所有规则都只是被忽略且未被覆盖。

CSS还按顺序读取规则，从最不具体到最具体，从上到下。每次为现有属性找到新规则时，它都会忽略旧规则并使用新规则。

考虑到这一点，让我们来看看：

2：背景属性

在CSS中，有多个属性可以处理background，例如：

background:
background-size:
background-position:
等

这些属性中的每一个都只会影响背景设置的一个属性;此规则的例外是catch-all background:属性。

通过设置background:属性，您将覆盖所有背景设置，包括未指定的背景设置。现在在CSS中，您已经在该catch-all background-属性之后编写了其他background:属性。这些将导致CSS忽略您在catch-all属性中设置的特定规则。

BUT！

当您将.style设置为使用background:属性时，您将插入一组比以前更具体的新CSS规则。这意味着CSS将最后读取这个新属性，因为它是catch-all，它将忽略您刚刚设置的所有先前规则;特别是，它忽略了您的background-size属性。

要解决此问题，请确保单独设置其中的每一项，并且不要使用catch-all属性。

E.g。使用background-image，background-repeat和background-position代替background:。

document.getElementById("myDiv").style.backgroundImage = "url(/img/someImage.jpg)";

您可以使用background:属性，但它需要您重新设置通过Javascript在原始CSS中设置的所有其他background-属性。

Answer 3

上下文并不完全清楚，但你在js中使用的选择器是＆＃34; div.image＆＃34;并且css只是＆＃34; div＆＃34;。选择器必须匹配。确保css使用＆＃34; div.image＆＃34;或者js使用＆＃34; div＆＃34;。

Answer 4

请参阅 JSFiddle 。您只需要替换URL图像而不是其他属性。

这是有效的行：

document.querySelector('div').style['backgroundImage'] = "url('your/image.png')"

Answer 5

使用背景时，它会覆盖所有背景属性，包括background-size。

如果要保留背景大小，则要使用以下行：

@media (max-width: 480px){
   .container {
    width: calc(100% - 50px);
    border: 1px solid black;
    margin: 50px auto;
    height: auto;
    position: relative;    
    border-radius: 2px;
    padding: 10px;
    padding-top: 25px;
}

如果这不是你的问题，请更好地解释一下

Answer 6

尝试使用.textContent，String.prototype.match()，String.prototype.split()，String.prototype.replace()替换url(' ') style元素之间的文字

＆＃13;

var style = document.getElementsByTagName("style")[0];

var url = new RegExp(style
                     .textContent
                     .match(/url\(\'(.*)\'\)/)[0]
                     .split(/url\(\'|\'\)/)[1]
                    );

style.textContent = style
                   .textContent
                   .replace(url
                    , "http://lorempixel.com/100/100/sports")

＆＃13;

div {
  background: url('http://lorempixel.com/100/100/nature') no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  float: left;
}

＆＃13;

<div></div>

＆＃13;

如何使用javascript动态传递background：url到css？

6 个答案:

1：CSS特异性

2：背景属性

BUT！