如何確定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（）我認為您可以解決您的問題。 如果您發布一些代碼，希望我能為您提供更多幫助。