Select css from header

Question

How can I get URL property value from element defined as

<html>
   <head>
      <style type="text/css">.sprite-thumb {background-image:url(example.jpg);}</style>
   </head>
</html>

I tried $(data).find("header").css("sprite-thumb") but got undefined

What is the element `data`? Are you getting the html back from an ajax call? `header` won't be found as you don't have a `header` element. You cannot read css properties like that. `.css` is used to get/set css properties off an element not read the defined properties in your stylesheets. You could grab all elements of class `sprite-thumb` off your html and read the background-image property with `$('.sprite-thumb').css("background-image")` but I think you need to define what your ultimate goal is. — scrappedcola, Nov 07 '13 at 17:26
You don't have a `data` element in the example above... so `$(data)` should give you `ReferenceError: data is not defined` or something similar depending on browser... — scrappedcola, Nov 07 '13 at 17:43
I have a variable called `data` in my code, which contains elements quoted in the question. — TOP KEK, Nov 07 '13 at 17:45

Claudio Holanda · Accepted Answer · 2013-11-07T18:18:40.140

2

You could do this:

var target = $('.sprite-thumb').css('background-image'),
    bg = target.replace(/(^(url\()|\)$)/g,"");

It basically uses .css() jQuery function to retrieve the value for background-image and then remove url( and ) from it, leaving just the url.

edited Nov 07 '13 at 18:18

answered Nov 07 '13 at 17:49

Claudio Holanda

this regular expression will remove every occurrence of `{`,`u`,`r`,`l`,`(`,`)` and `}` characters. – Pranav Gupta Nov 07 '13 at 17:58
also, at least one element with specified class needs to exist in DOM, otherwise too this won't work. – Pranav Gupta Nov 07 '13 at 18:00

1 Answers1