如何确定javascript中文本的实际背景色和颜色（firefox扩展代码）

我正在编写一个firefox扩展（javascript）

当浏览器操作员将鼠标光标停留在HTML浏览器文档中的“术语”（单词/短语/首字母缩略词）上时，我需要通过更改该术语的颜色（而不是整个文本节点）来突出显示该术语的文本

但我需要知道backgroundColor属性和text color属性，然后计算出合适的颜色，以实现术语的可见和令人愉悦的“突出显示”

我搞不懂的是，如何获取backgroundColor和color属性的值，这些属性将在任意HTML文档中的任意位置处于活动状态。我不能只编写读取文本节点（不存在）的style.color或包含文本节点的元素（因为该元素通常不包含任何element.style.color或element.style.backgroundColor规范）的代码

据我所知，随机元素（以及该元素中包含的文本节点）的backgroundColor和color属性可以来自节点层次结构的任何位置，或者来自文档中其他块的某个位置（如“head”），或者来自HTML文档中的其他javascript代码，或者来自某些“样式表”HTML文档中的规范或链接到HTML文档中的规范

因此，我正在寻找一种javascript方法来确定浏览器将实际应用于任意HTML文档中任意HTML元素的backgroundColor和color属性，希望无需编写代码来遍历嵌套的层次结构，然后再查看文档的其他部分（如“head”和其他），然后可能会发现CSS文件的应用，并尝试读取和解析它们！这将是一个可怕的痛苦，而且非常浪费，因为浏览器显然已经解决了所有这些问题，以便显示HTML

那么，javascript看起来是什么样的，它将决定浏览器将应用于给定文本节点（或该文本节点周围的元素）的实际背景颜色和颜色属性

我假设在计算后更改文本颜色会很简单，可能类似于：

element.style.color = newcolor;

但是javascript确定浏览器应用的背景颜色和颜色是另一回事

我的搜索发现了以下功能，但据我所知，这并没有考虑到在浏览器应用这些属性之前对其进行修改的所有方式：

var fgc = window.getComputedStyle(element).getPropertyValue("color");
var bgc = window.getComputedStyle(element).getPropertyValue("backgroundColor");

---

解决方案是什么？

嗯，我需要看看你的代码，因为我不确定我是否理解你的问题。总之，如果你想使用Javascript，你可以使用Jquery with.hover（）方法将nowcolor放入一个变量中，这样你就可以面对它并根据需要进行更改

我的意思是：

var color = $('#content_text').attr('color');
var bgcolor = $('#content_text').attr('backgound-color');

然后使用我认为你可以解决你的问题。

---

如果您发布一些代码，我希望我能为您提供更多帮助。

嗯，我不知道有什么完美的方法可以做到这一点

但是，如果您也遍历父节点（如果实际节点没有产生可行的结果），那么

getComputedStyle（）

方法应该可以很好地工作

以下是我的未优化实现：

function colorForElement(element, what) {
    var color = null;
    var w = element.ownerDocument.defaultView;
    while (element) {
        color = w.getComputedStyle(element).getPropertyValue(what);
        if (color && color != "transparent") {
            break;
        }
        element = element.parentElement;
    }
    return color;
}

我可能错过了一些边缘案例，但这是一个很好的基线功能，IMO

我在本页上测试了以下内容：

addEventListener("click", function(e) {
    console.log("fore", colorForElement(e.originalTarget, "color"));
    console.log("back", colorForElement(e.originalTarget, "background-color"));
}, true);

---

jQuery.attr（'color'）和jQuery.attr（'background-color'）将查找名为color和background-color的属性（在大多数元素中，这两个属性无效）。这些问题讨论的是computedStyle。按照您的理解，getComputedStyle（）吗考虑HTML文档中祖先节点层次结构的当前活动状态（以及CCS信息的所有来源）？