0

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

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

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

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

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

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

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

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

element.style.color = newcolor;

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

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

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

解决方案是什么？

4

2 回答 2

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);
于 2013-11-01T16:31:32.293 回答
-1

嗯，我需要查看您的代码，因为我不确定我是否理解您的问题。Anyqay，如果您想使用 Javascript，您可以使用带有 .hover() 方法的 Jquery 将 nowcolor 放入变量中，这样您就可以面对它并根据需要进行更改。

我是说：

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

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

于 2013-11-01T15:07:53.627 回答