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?

Might be relevant to [this question](http://stackoverflow.com/questions/3223682/change-css-of-selected-text-using-javascript) — putvande, Dec 18 '13 at 17:04

score 1 · Answer 1 · answered Dec 18 '13 at 16:58

1

I got it to work like this:

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

See the fiddle

answered Dec 18 '13 at 16:58

veelen

1,916
19
26

I need the background color of the selected text, not the background color of the div. – st3fan Dec 18 '13 at 16:59
I need the background of the selected text, not the color of the text inside div. See http://jsfiddle.net/4Wk2X/11/. If I select the red part of the text, then it should give red background. If I select the yellow one, it should return yellow. – st3fan Dec 18 '13 at 17:06
You have to wrap your selected text in a span and then get the color of the text in it. There is a Range module that can help you with this. see: http://stackoverflow.com/questions/6328718/wrapping-a-selected-text-node-with-span and http://stackoverflow.com/questions/5809310/jquery-how-do-i-apply-css-to-selected-text – veelen Dec 18 '13 at 17:22

score 1 · Accepted Answer · answered Dec 18 '13 at 17:47

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/

Tewr · Answer 3 · 2013-12-18T17:39:35.200

0

$(window.getSelection().focusNode.parentNode).css('background-color') works.

$(window.getSelection().focusNode.parentNode) finds the parent node of your text , and it's the parent node that has the relevant css property.

To be more precise, we will get the parent node of the node where you ended your selection. $(window.getSelection().anchorNode.parentNode) can be used if you want the start of the selection. as a selection can contain many backgroundcolors, you will have to choose.

edited Dec 18 '13 at 17:39

answered Dec 18 '13 at 17:14

Tewr

3,713
1
29
43

It doesn't work if you select all the red text. It will get the wrong parent. – st3fan Dec 18 '13 at 17:43

score 0 · Answer 4 · answered May 23 '16 at 09:29

0

document.execCommand('styleWithCSS',false,true);
value = document.queryCommandValue('backColor');
document.execCommand('styleWithCSS',false,false);

It works well.

answered May 23 '16 at 09:29

刘少辉

1
1

Ringo · Answer 5 · 2013-12-18T17:14:00.493

-1

This is my idea(not test):

 alert($(document.getSelection().anchorNode).css('background-color'));

edited Dec 18 '13 at 17:14

answered Dec 18 '13 at 17:07

Ringo

3,795
3
22
37

It seems that anchorNode doesn't has style. – st3fan Dec 18 '13 at 17:10
But it is an node text object, right? I'm trying some way, hihi. It's great when you use jquery – Ringo Dec 18 '13 at 17:12
Something is going on here! It's not working. Because it seem doesn't background-color – Ringo Dec 18 '13 at 17:18

Background color of selected text with javascript

5 Answers5