如何获取元素:使用javascript和CORS悬停背景

How to get element:hover background with javascript and CORS

本文关键字：javascript 使用 CORS 背景 悬停 元素 何获取 获取      更新时间：2023-09-26

我想用js/jquery为多个元素获取：悬停css，我已经有了工作功能，但我得到了这个eror:

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问题，因为我从另一个域导入CSS+谷歌字体，但我的.htaccess中有这个问题

Access-Control-Allow-Origin "*"

这更像是一只萤火虫。有什么帮助吗？

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

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在回答中所建议的那样，您也可以将外部资源代理到同一服务器和端口以使其工作。这是一项巨大的努力，如果其他方法都不起作用，你可能应该考虑一下

由于您无法修改Google/其他域发送的头。我们必须找到一个变通办法。

我认为这样做的一种方法是为这些资源设置一个代理：即，您向服务器请求这些文件，服务器获取这些文件，并用适当的头将其发送给您（即设置这些CORS头）。然后你就可以这样做了。

相关文章：