3

I'm trying to make a snippet of javascript that can get a list of all images (or other resources) that are used in a web page because they are referenced in the css. Typically they are background images, because somewhere in the css there is something like this:

.something {
  background: transparent url(images/somethingbg.png) no-repeat top left;
  }

It seems I can get all of these into an array (with their full path) with the following snippet:

var outputArray = [];
var string = "";
var elems = document.getElementsByTagName('*');
for (var i = 0; i<elems.length; i++) {
 var elem = elems[i];
 var style = window.getComputedStyle(elem, null);
 var value = style.getPropertyValue("background-image");
 if (value && value != "" && value != "none")
  outputArray.push(value);
 }

However, I want this to work on any file out there (running as a bookmarklet), and I know url() can apply to things that aren't background images, for instance "list-style-image". Are there more? Is there a list of these somewhere?

rob
  • 9,933
  • 7
  • 42
  • 73
  • Are you asking "What are all the possible values that can be used in in url() that are not background images?" ? – jessegavin May 10 '11 at 20:07
  • @jessegavin, i think he is asking for all the properties that can validly accept `url(..)` as a value.. – Gabriele Petrioli May 10 '11 at 20:09
  • @jessegavin Yes, that's what I'm asking. But keep in mind that I am using getComputedStyle(), so if you use something like "background" in the css and have a url in there, all my code needs to know about is "background-image". – rob May 10 '11 at 20:14
  • possible duplicate of [List of All Background Images in DOM](http://stackoverflow.com/questions/2430503/list-of-all-background-images-in-dom) – jessegavin May 10 '11 at 20:17
  • @jessegavin : actually, although I hadn't seen that question you refer to, the snippet of code in my question above answers that question pretty well. However, it doesn't answer my own question. :) – rob May 10 '11 at 20:20
  • @rob, you're right. I am sorry. I can't un-close. I feel bad. – jessegavin May 10 '11 at 20:22

1 Answers1

2

AFAIK here's a pretty exhaustive (?) list:

  1. background-image (shorthand background) beware of multiple url("") in CSS3
  2. list-style-image (shorthand list-style)
  3. behavior (-ms-behavior), filter (-ms-filter), filter and -moz-binding
  4. cursor
  5. content
  6. attribute selectors which contain URI values: href, cite, xmlns, src, data-*, data, codebase, classid, archive, longdesc, profile…
  7. @import, @namespace and @font-face
Knu
  • 14,806
  • 5
  • 56
  • 89