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

Question

我正在写一个Firefox扩展（在javascript中）。

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

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

我不知道的是如何获取在任意HTML文档中随机位置有效的backgroundColor和color属性的值。 我不能只编写读取文本节点的style.color（不存在）或包含文本节点的元素的代码（因为该元素通常将不包含任何element.style.color或element）。 style.backgroundColor规范）。

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

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

那么，javascript看起来像什么，将决定浏览器将应用于给定文本节点（或包围该文本节点的元素）的实际backgroundColor和color属性？

我假设一旦计算出文字颜色就很简单，大概是这样的：

element.style.color = newcolor;

但是确定浏览器应用的backgroundColor和color的javascript是另一回事。

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

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

有什么解决方案？

Answer 1

好吧，我不知道有什么完美的方法...

但是，如果遍历父节点，并且实际节点不能产生可行的结果，则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);

Answer 2

嗯，我需要查看您的代码，因为我不确定我是否理解您的问题。 无论如何，如果您想使用Javascript，可以将Jquery与.hover（）方法结合使用，将nowcolor放入变量中，以便您可以面对它并根据需要进行更改。

我的意思是：

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

然后使用jquery text（）我认为您可以解决您的问题。 如果您发布一些代码，希望我能为您提供更多帮助。