getComputedStyle() and properties that can have a url associated with them
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++) 开发者_JAVA技巧{
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?
AFAIK here's a pretty exhaustive (?) list:
- background-image (shorthand
background) beware of multiple
url("")
in CSS3 - list-style-image (shorthand list-style)
- behavior (-ms-behavior), filter (-ms-filter), filter and -moz-binding
- cursor
- content
- attribute selectors which contain URI values: href, cite, xmlns, src, data-*, data, codebase, classid, archive, longdesc, profile…
- @import, @namespace and @font-face
精彩评论