javascript - 如何使用javascript和CORS获取element:hover背景

我想用js / jquery获得：hover多个元素的css，我已经有了工作功能，但是我得到了这个错误：

SecurityError: The operation is insecure.
ruleList = sheetList[i].cssRules;

功能：

function getStyleBySelector(selector){
    var sheetList = document.styleSheets;
    var ruleList;
    var i, j;
    for (i=sheetList.length-1; i >= 0; i--){
        ruleList = sheetList[i].cssRules;
        for (j=0; j<ruleList.length; j++){
            if (ruleList[j].type == CSSRule.STYLE_RULE && ruleList[j].selectorText == selector){
                return ruleList[j].style;
            }
        }
    }
    return null;
}
getStyleBySelector('#desc a:hover').background

我知道这是一个CORS问题，因为我是从另一个域+ Google字体导入CSS的，但是我在.htaccess中有此问题

Access-Control-Allow-Origin "*"

这更多是一个Firefox错误。请帮忙吗？

最佳答案

有三种方法可以解决此问题：

1）不要使用原始的CSS规则，而是查询DOM：

var $selector = document.querySelector('#desc a:hover');
var computedStyle;
var background = [];

// Read value of background and write into background array
for (var i = 0; i < $selector.length; i++) {
    computedStyle = window.getComputedStyle($selector[i], null);
    background.push(computedStyle.getPropertyValue('background'));
}

2）排除外部样式表：
这不包括外部样式表，因此您不会遇到安全问题（但随后会错过外部样式表的匹配选择器）

var getCSSHost = function (href) {
    var fakeLinkOfSheet = document.createElement('a');

    fakeLinkOfSheet.href = href;
    return fakeLinkOfSheet.host;
};

var sheetHost = getCSSHost(stylesheet.href);

if ((sheetHost !== window.location.host)) {
    return; //exit early, i.e. return false
}
// else go on

3）代理外部资源
正如John在他的答案中建议的那样，您还可以将外部资源代理到同一服务器和端口以使其正常工作。这是一项巨大的工作，如果只有其他方法无效，您应该考虑一下。

关于javascript - 如何使用javascript和CORS获取element:hover背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29076242/