retrieve background image from css using javascript without using it's ID

Question

I've looked around and it's been hard to find a thread that does what I want it to do. As far as I am concerned, I don't even know if it's possible. What I am looking to do is to retrieve the background image file name (especially if it is a link) when it is click. I have a script that logs all click but the last piece I need is the background-image name (file-path with name would even do) stored in the CSS file. Anyone have an idea or a solution as to how this can be done without using a div or class? Here's what I have right now:

JavaScript & HTML

<script type="text/javascript">
var arrayWithElements = new Array(); //,replaytimer;

document.onclick = clickListener;

function clickListener(e)
{
var clickedElement=(window.event)
                    ? window.event.srcElement
                    : e.target,
    tags=document.getElementsByTagName(clickedElement.tagName);

for(var i=0;i<tags.length;++i)
{
  if(tags[i]==clickedElement)
  {
    if(clickedElement.tagName=="A")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.href,clickedElement.innerText,document.location.href,document.images.href);
    }
    if(clickedElement.tagName=="IMG")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
    }
    if(clickedElement.tagName=="DIV")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
    }
    if(clickedElement.tagName=="CLASS")
    {
      arrayWithElements.push({tag:clickedElement.tagName,index:i});
      console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
        }
      }
    }
  }
</script>
</head>

<a id="1" href="#">trial1</a>
<a id="2" href="http://www.google.com" target="blank">google</a>
<a id="3" href="http://www.google.com">google</a>
<a id="4" href="http://www.google.com" target="_blank"><img id="image" src="untitled.jpg"/></a>
<a id="5" href="trial.html">
<input type="text" id="text-test"/>
<a href="http://www.google.com"><div id="image-link"></div></a>

CSS:

#image-link {
        background-image:url('untitled.jpg');
        width: 50px;
        height:50px;
        border: 1px solid #000000;
}

This is a test file that will be converted for use in the near future. Thanks

@kalley that won't find one that has been applied using a stylesheet, only styles applied with a style attribute in the tag. — Alnitak
– Alnitak, Commented Aug 8, 2013 at 14:09

Alnitak · Accepted Answer · 2013-08-08 14:10:30Z

2

On newer browsers, you can use window.getComputedStyle(clickedElement) to find the background image property.

answered Aug 8, 2013 at 14:10

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

3 Comments

kalley Over a year ago

or in older versions of IE, you will need to use elem.currentStyle

Beardy Over a year ago

@Alnitak So for instance, I could do something along the lines of: console.log(window.getComputedStyle(clickedElement)); This you are saying should produce all of the css values of this particular objects style? Tried it and no luck but I love the idea.

Beardy Over a year ago

@Alnitak When debugging, are you looking under style?

john 4d5 · Accepted Answer · 2013-08-08 14:26:16Z

0

As per your code, just the filename or the path using JQuery in all browsers:

var withId = $("#image-link").css("background-image").split('(')[1].split(')'),
    withoutId = $("img").attr("src");

    // with id and css file
    console.log(withId[0]);
    // without id and inline style
    console.log(withoutId);

answered Aug 8, 2013 at 14:26

john 4d5

7416 silver badges11 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:25:26Z

0

Yes, as Alnitak says, use getComputedStyle, but for compatibility with more browsers check out this other question:

Get element CSS property (width/height) value as it was set (in percent/em/px/etc)

Note: I would love to be able to comment on another user's good answer instead of posting my own that is pretty much the same but with a little additional info. Unfortunately, I cannot because stackoverflow doesn't permit this for a user with less than 50 rep. So I have to post it like this instead.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Aug 8, 2013 at 14:26

seebigs

8898 silver badges10 bronze badges

1 Comment

seebigs Over a year ago

meta.stackexchange.com/questions/12119/…

Collectives™ on Stack Overflow

retrieve background image from css using javascript without using it's ID

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related