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

Question

See the css below and I would like to change the "background:url" part dynamically using 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;
}

I tried the same by passing below javascript

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

and this results against my purpose of the original css.

Can someone help me fixing this?

Thanks in advance.

Answer 1

I think this should work :

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

Edit : Trick : if you're on Chrome, launch webdev panel (F12) and in the console write console.log(document.querySelector('div.image').style)

You will get all attributes of the "style" object, which you can then change as you want

Answer 2

To understand what's going on here, you need to understand two things: CSS specificity and CSS background- properties.

---

1: CSS Specificity

The primary problem you are having here is that using .style=[something] in Javascript will write your new styles to the HTML style="[something]" attribute. It does not overwrite the browser's cached version of the CSS, and therefore, all rules pertaining to the property you are changing are simply ignored and not overwritten .

CSS also reads rules in order, from least specific to most specific, from top to bottom. Every time it finds a new rule for an existing property, it disregards the old one and uses the new one.

With that in mind, let's take a look at:

2: Background- Properties

In CSS, there are multiple properties that handle background , such as:

• background:
• background-size:
• background-position:
• etc.

Each of these properties will only affect ONE property of the background settings; the exception to this rule is the catch-all background: property.

By setting the background: property, you overwrite ALL background settings, including ones you don't specify . Now in your CSS, you have written other background- properties after that catch-all background: property. Those will cause CSS to ignore the specific rules you set in the catch-all property.

BUT!

When you set the .style to use the background: property, you are inserting a whole new set of CSS rules that are more specific than the previous ones. This means that CSS will read this new property last, and since it is the catch-all, it will ignore ALL of the previous rules you just set up; in particular, it is ignoring your background-size property.

To fix this, make sure that you set each of these individually and do not use the catch-all property.

Eg use background-image , background-repeat , and background-position instead of background: .

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

You can use the background: property, but it will require you to re-set all of the other background- properties that you set in the original CSS via Javascript.

Answer 3

The context is not completely clear, but the selector you are using in js is "div.image" and the css is just "div". The selectors must match. Make sure either the css uses "div.image" or the js uses "div".

Answer 4

See this JSFiddle . You just need to replace the URL image and not the other properties.

This is the line that works:

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

Answer 5

When you use background it overrides all of the background properties, including background-size.

you want to use the following line if you want to retain background-size:

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

if this wasn't your problem please explain yourself better

Answer 6

Try utilizing .textContent , String.prototype.match() , String.prototype.split() , String.prototype.replace() to replace text between url(' , ') of style element

 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") 

 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; } 

 <div></div>