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

Question

I am writing a firefox extension (in javascript).

When the browser operator pauses his mouse cursor over a "term" (word/phrase/acronym) in the HTML browser document, I need to highlight the text that displays that term by changing the color of that term (not the entire text node).

But I need to know the backgroundColor attribute and text color attribute at that point to compute an appropriate color to achieve a visible and pleasing "highlight" of the term.

What I can't figure out is how to get the values of the backgroundColor and color attributes that will be active at random places in arbitrary HTML documents. I can't just write code that reads the style.color of the text node (doesn't exist), or the element that contains the text node (because that element usually won't contain any element.style.color or element.style.backgroundColor specification at all).

As far as I can tell, the backgroundColor and color attributes of a random element (and the text nodes contained in that element) can come from anywhere up the node hierarchy, or from somewhere in some other block in the document (like "head"), or from other javascript code within the HTML document, or from some "style-sheet" specification either in the HTML document or linked into the HTML document.

So I'm looking for a way for javascript to determine what backgroundColor and color attributes will be actually be applied by the browser to arbitrary HTML elements in arbitrary HTML documents, hopefully without needing to write code to walk all the way up the nested hierarchy, then perhaps look around in other sections of the document (like "head" and maybe others), then perhaps find out what CSS files apply and try to read and parse them too! That would be a horrible pain, and extremely wasteful since the browser obviously already figured all this out in order to display the HTML.

So, what does the javascript look like that would determine the actual backgroundColor and color attributes that the browser will apply to a given text-node (or the element that surrounds that text node)?

I assume changing the text color once I compute it will be simple, probably something like:

element.style.color = newcolor;

But the javascript to determine the browser applied backgroundColor and color is another matter.

My searches found the following function, but from what I understand this does not take into account every way these attributes might be modified before they are applied by the browser:

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

What's the solution?

Answer 1

Well, I'm not aware of any perfect way to do so...

However, the getComputedStyle() approach should work reasonably well if you traverse parent nodes as well if the actual node does not yield a viable result.

Here is my unoptimized implementation:

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;
}

I might have missed some edge-cases, but this is a good baseline function, IMO.

I tested this with the following on this very page:

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

Answer 2

Mmm, i'd need to see your code because i'm not sure that i understood your problem. Anyqay if you want to use Javascript you can use Jquery with .hover() method to put the nowcolor in a variable so you can confront it and change as you need.

I mean:

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

then using jquery text() i think that you can solve your problem. If you post some code i hope i can help you more.