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, Aug 08 '13 at 14:09

score 2 · Accepted Answer · answered Aug 08 '13 at 14:10

2

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

answered Aug 08 '13 at 14:10

Alnitak

334,560
70
407
495

or in older versions of IE, you will need to use `elem.currentStyle` – kalley Aug 08 '13 at 14:12
@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 Aug 08 '13 at 15:54
@Alnitak When debugging, are you looking under style? – Beardy Aug 08 '13 at 16:32

score 0 · Answer 2 · answered Aug 08 '13 at 14:26

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

score 0 · Answer 3 · edited May 23 '17 at 10:25

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 '17 at 10:25

Community

1
1

answered Aug 08 '13 at 14:26

seebigs

869
8
9

http://meta.stackexchange.com/questions/12119/lower-the-amount-of-reputation-needed-to-comment – seebigs Aug 08 '13 at 14:55

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

3 Answers3