Background color of selected text with javascript

Question

I have a div with contenteditable="true" and I want to get the background color of the selected text. It works fine in Chrome but it fails in Firefox by returning "transparent" all the time. Here is now I try to do it. HTML:

<div contenteditable="true" id="selector" style="background-color: rgb(255,255,0);">
    Test back<span style="background-color: rgb(255,0,0);">ground</span> color.
</div>

Javascript

$('div#selector').on('mouseup', function (){
    alert(document.queryCommandValue('backColor'));
});

Sample: http://jsfiddle.net/4Wk2X/11/

Do you have any idea why this happens?

Answer 1

I managed to get it work by using the parent of the selection and then the CSS background-color property.

var selectionParent = function () {
    var parent = null, sel;

    if (window.getSelection) {
        sel = window.getSelection()
        if (sel.rangeCount) {
            parent = sel.getRangeAt(0).commonAncestorContainer
            if (parent.nodeType != 1) {
                parent = parent.parentNode
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parent = sel.createRange().parentElement()
    }

    return parent
}

$('div#selector').on('mouseup', function (){
    alert(selectionParent().css('background-color'));
});

See http://jsfiddle.net/4Wk2X/14/