Accessing inline CSS properties using getElementsByClassName

Question

I have this piece of HTML code.

<div class="tagWrapper">
<i style="background-image: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/390945_10150419199065735_543370734_8636909_2105028019_a.jpg);"></i>
</div>

I need to get that url within the brackets. I tried using the getElementsByClassName() method but it didn't work. Since url is not a HTML element, I have no idea on how to take out the value. I can't use getElementById(), because I can't add an id to the HTML (it's not mine). It needs to work in Chrome and Firefox. Any suggestions?

What browsers the code has to work with?

Michas
– Michas

2011-12-17 17:38:40 +00:00
Commented Dec 17, 2011 at 17:38 — Michas
– Michas, Commented Dec 17, 2011 at 17:38
See this fiddle of my answer: jsfiddle.net/c4urself/8kj7b

c4urself
– c4urself

2011-12-17 17:45:45 +00:00
Commented Dec 17, 2011 at 17:45 — c4urself
– c4urself, Commented Dec 17, 2011 at 17:45

Adam Rackis · Accepted Answer · 2011-12-17 19:42:29Z

2

You didn't add a jQuery tag, so here's a native solution (note that this likely won't work on older versions of IE, but you said it only has to work on Chrome and FF):

var origUrl = document.getElementsByClassName("tagWrapper")[0]
                          .children[0].style.backgroundImage;
var url = origUrl.substr(4, origUrl.length - 5);

Or

var url = origUrl.replace("url(", "").replace(")", "");

Here's a fiddle

EDIT

Answering your comment

document.getElementsByClassName("tagWrapper")

gets all elements with the class name tagWrapper. So to get the first one, you grab the zero index

document.getElementsByClassName("tagWrapper")[0]

Then you want the first child under there, and the backgroundImage property on this first child.

document.getElementsByClassName("tagWrapper")[0]
                          .children[0].style.backgroundImage;

From there it's a simple matter stripping the url( and ) from it

var url = origUrl.substr(4, origUrl.length - 5);

or

var url = origUrl.replace("url(", "").replace(")", "");

edited Dec 17, 2011 at 19:42

answered Dec 17, 2011 at 17:40

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

3 Comments

ThinkingStiff Over a year ago

+1 This is exactly what the OP asked for, and without jQuery.

Isuru Over a year ago

This works perfectly! A clever one, I must say. btw can you please explain the first block of code a bit more? sorry but I'm new to JavaScript.

Adam Rackis Over a year ago

@nK0de - glad you liked it - see my edit for a more thorough explanation.

ThinkingStiff · Accepted Answer · 2011-12-17 19:06:41Z

2

You can use querySelector():

Demo: http://jsfiddle.net/ThinkingStiff/gFy6R/

Script:

var url = document.querySelector( '.tagWrapper i' ).style.backgroundImage;
url = url.substr(4, url.length - 5);

edited Dec 17, 2011 at 19:06

answered Dec 17, 2011 at 18:55

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Comments

Dominic Green · Accepted Answer · 2011-12-17 17:36:19Z

1

If you where using jquery you could do something like this

$(".tagWrapper i").css("background-image")

answered Dec 17, 2011 at 17:36

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Comments

Adilson de Almeida Jr · Accepted Answer · 2011-12-17 17:38:29Z

1

I think if you use jQuery it will be easer.

var w = document.getElementsByClassName('tagWrapper')[0];
for (var i=0; i<w.childNodes.length; i++)
  if (w.childNodes[i].tagName && w.childNodes[i].tagName.toLowerCase() == 'i')
    return w.childNodes[i].style.backgroundImage;

answered Dec 17, 2011 at 17:38

Adilson de Almeida Jr

2,75521 silver badges37 bronze badges

4 Comments

Adilson de Almeida Jr Over a year ago

Yeah! It's very interesting people don't masster js know how the simple things can became hareder without jquery (or another js framework).

Isuru Over a year ago

yes, considered that too. The thing is I'm gonna use this to write a greasemonkey/userscript. So as a reference, I have to include ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js But I learned that Chrome doesn't support the @require to do that so that's why I'm trying to accomplish this through HTML only. Thanks for the answer.

noob Over a year ago

@nK0de you can vote an answer up if you think it's good by clicking on the arrow up and if you asked the question you can accept the answer by clicking on the tick.

Isuru Over a year ago

@micha yes, I will do that definitely right after I finish this one. Thanks.

c4urself · Accepted Answer · 2011-12-17 17:43:38Z

0

<div class="tagWrapper">
     <i id="something" style="background-image: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/390945_10150419199065735_543370734_8636909_2105028019_a.jpg);"></i>
</div>

// script / without jQuery

var url = document.getElementById('something').style.backgroundImage.match(/\((.*?)\)/)[1];

edited Dec 17, 2011 at 17:43

answered Dec 17, 2011 at 17:37

c4urself

4,31723 silver badges34 bronze badges

1 Comment

Isuru Over a year ago

I cannot add an id because this isn't my HTML code. I wish there was one. It would have been a lot easier.

noob · Accepted Answer · 2011-12-17 17:45:39Z

0

Use jQuery!!!

$("div.tagWrapper i").css("background-image").substr(4, $("div.tagWrapper i").css("background-image").length-5)

Example

edited Dec 17, 2011 at 17:45

answered Dec 17, 2011 at 17:36

noob

9,2224 gold badges40 silver badges65 bronze badges

3 Comments

Isuru Over a year ago

Considered jQuery too but the thing is I'm gonna use this to write a greasemonkey/userscript. So as a reference, I have to include ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js But I learned that Chrome doesn't support the @require to do that so that's why I'm trying to accomplish this through HTML only. But thanks for the answer.

noob Over a year ago

You don't need to require it, you can easily copy the code and paste it in-front of the code file. And for your information the newest jQuery version is 1.7.1.

Isuru Over a year ago

is that so? I didn't know that. I'm new to JavaScript. Still in the learning stage. Thanks a lot for that piece of info.

Michas · Accepted Answer · 2011-12-17 20:08:13Z

If You don't have to care about Microsoft browsers, the raw JavaScript is quite easy. You can use getElementsByClassName and getElementsByTagName, however it is easier to try querySelectorAll. I've included both. The use of regular expression preserve relative links.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type='text/javascript'>
    var do_find_a = function() {
        var tmp = document.getElementsByClassName('tagWrapper')[0];
        var tst = tmp.getElementsByTagName('i')[0].getAttribute('style');
        return do_alert(tst);
    }
    var do_find_b = function() {
        var tst = document.querySelectorAll('.tagWrapper i')[0].getAttribute('style');
        return do_alert(tst);
    }
    var do_alert = function(tst) {
        var reg = /background-image:\s*url\(["']?([^'"]*)["']?\);?/
        var ret = reg.exec(tst);
        alert (ret[1]);
        return;
    }
    document.addEventListener('DOMContentLoaded',do_find_a,false);
    document.addEventListener('DOMContentLoaded',do_find_b,false);
</script>
</head>
<body>
    <div class='tagWrapper'>
        <i style='background-image: url("http://example.com/image.jpg");'></i>
    </div>
    Text to ignore.
</body>
</html>

And jsFiddle version:
http://jsfiddle.net/hpgmr/

Collectives™ on Stack Overflow

Accessing inline CSS properties using getElementsByClassName

7 Answers 7

3 Comments

Comments

Comments

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related