Question

对于给定的元素或选择器，我可以通过遍历document.styleSheets来获取适用于它的css规则。我注意到Chrome和FF之间的区别在于，对于使用url()的样式，如url(/path/to/resource.ext)，如果有相对网址，则chrome足以输出绝对路径，但不是ff。这是一个例子：

CSS：

#logo{
    width:32px;
    height:23px;
    background-image:url('/img/logo.png');
    background-color:blue;
    border:1px solid black;
}

JS：

   var selector='#logo';
   var sheets = document.styleSheets;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules)
        {
            if (rules[r].selectorText==='#logo')
            {
            console.log(rules[r].cssText);
            }
        }
    }

HTML

<div id='logo'></div>

在FF中，输出是（相对路径！）

console.log(rules[r].cssText);
//#logo { width: 32px; height: 23px; 
//        background-image: url("/img/logo.png"); 
//        border: 1px solid black; }

在Chrome中，我得到（绝对路径！）

console.log(rules[r].cssText);
//#logo { width: 32px; height: 23px; border: 1px solid black; 
//        background-image: url(http://fiddle.jshell.net/img/logo.png); }

你可以在这里看到小提琴：

http://jsfiddle.net/kd7hrueu/2/

无论如何都要在FF中获得绝对路径？

Answer 1

排序。但是你会对它有所了解。

CSS中的每个相对路径都与样式表的位置相关（如果您没有考虑旧版Internet Explorer＆＃34;＆＃34;行为＆＃34;，其路径相对于文档的位置。）

你可以在href属性中找到样式表的位置，这应该是一个绝对的路径。如果您的规则使用url(...)，则应解析路径。

var urlRE = /\burl\s*\(\s*([^\)]*|"[^"]*"|'[^']')\s*\)/g,
    schemaRE = /^(https?|file|data):/,
    css = rules[r].cssText, match, url;

while (match = urlRE.exec(css)) {
    url = match[1];

    // Strips the quotes if present
    if (url[0] === '"' || url[0] === "'")
        url = url.slice(1, -1);

    url = resolvePath(sheets[i].href, url);
    // do other stuff...
}

function resolvePath(base, url) {
    // The path is either absolute or a data URI
    if (schemaRE.test(url)) return url;

    // The path refers to another domain with the same schema
    if (url.substring(0, 2) === "//")
        return location.protocol + url;

    // The path is relative to the host's root
    if (url[0] === "/")
        return location.protocol + "//" + location.hostname + url;

    // Gets the stylesheet's dirname
    var i = base.lastIndexOf("/");
    base = base.substring(0, i + 1);

    return base + url;
}

在那里，已经完成了。好吧，差不多。路径可以使用..爬行目录，但为了简单起见，我避免编写完整的路径解析器。

在这些情况下的一个技巧是利用锚元素：

var a = document.createElement("a");
a.href = url;         // e.g. http://host.com/test/../css/foo.css
console.log(a.href);  // => http://host.com/css/foo.css

JavaScript：cssText属性，如何获取在FireFox中使用外部资源的样式的绝对路径？

1 个答案: