How to get inline style that was overridden by CSS !important using JavaScript

Question

<div style="background: url(http://www.example.com/image.jpg) center center/cover;">

This inline background image gets overridden by an external stylesheet:

div {
  background-image: none !important;
}

My question: using JavaScript/jQuery, how can I get the URL of the background image that was defined in the inline styling but was overridden by CSS?

Edit: Trying to use .css() won't work because that gets the computed background style, which is none

I saw an answer for this in another SO question. Forgot where. — Manu Masson
– Manu Masson, Commented Sep 22, 2015 at 18:38
try this var bg = $("div").css('background-image'); bg = bg.replace('url(','').replace(')',''); — Andi AR
– Andi AR, Commented Sep 22, 2015 at 18:38

blex · Accepted Answer · 2015-09-23 13:23:09Z

1

If you don't mind using Regex :

var match = $('div').attr('style').match(/url\(["|']?(.+)["|']?\)/);
var url = match ? match[1] : 'default.jpg';

Explanation :

["|']? will allow you to have quotes or not. (.+) will capture the url to recover.

On the second line, we check that there is a match, and if there is none, return a default url.

edited Sep 23, 2015 at 13:23

answered Sep 22, 2015 at 18:59

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

binaryfunt Over a year ago

Can I ask, why have you escaped " and '? I didn't think they had a meaning in regular expressions?

blex Over a year ago

@BinaryFunt You're right! They don't need to be escaped.

binaryfunt Over a year ago

Also, I think making the (.+) into (.+?) is required, otherwise a quote mark could be left on the end? PS nice and simple answer btw!

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-22 19:03:21Z

You can get it this way:

function getStyle() {
  styles = $("div").attr("style");
  styles = styles.split(";");
  for (i = 0; i < styles.length; i++) {
    styles[i] = styles[i].replace(new RegExp(/http(.*)\:\/\//), "http$1___//");
    styles[i] = styles[i].split(":");
    styles[i][1] = styles[i][1].replace(/___/g, ":");
    if (styles[i][0].trim().indexOf("background") === 0)
      return styles[i][1].replace(/^(.*)url|[\(\)]/g, '').split(" ", 1)[0];
  }
}

Working Snippet

$(function () {
  alert($("div").css("background-image"));
  alert(getStyle());
});

function getStyle() {
  styles = $("div").attr("style");
  styles = styles.split(";");
  for (i = 0; i < styles.length; i++) {
    styles[i] = styles[i].replace(new RegExp(/http(.*)\:\/\//), "http$1___//");
    styles[i] = styles[i].split(":");
    styles[i][1] = styles[i][1].replace(/___/g, ":");
    if (styles[i][0].trim().indexOf("background") === 0)
      return styles[i][1].replace(/^(.*)url|[\(\)]/g, '').split(" ", 1)[0];
  }
}

div {
  background-image: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="background: url(http://www.example.com/image.jpg) center center/cover;">

Note: The $('div').css('background-image'); will always give the computed value of none.

GrafiCode · Accepted Answer · 2015-09-22 18:38:37Z

0

use jQuery css method to get the DIV's background-image:

var bg = jQuery('div').css('background-image');

answered Sep 22, 2015 at 18:38

GrafiCode

3,3653 gold badges31 silver badges33 bronze badges

3 Comments

GrafiCode Over a year ago

@PraveenKumar elaborate please

GrafiCode Over a year ago

I looked around a little, I think this question might have been answered already stackoverflow.com/questions/837694/…

binaryfunt Over a year ago

@GrafiCodeStudio That question is different because the background is not being overridden. Your answer here gets the computed background, which is none due to the stylesheet

Collectives™ on Stack Overflow

How to get inline style that was overridden by CSS !important using JavaScript

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related