使用 javascript 选择文本的背景颜色答案

【问题标题】：Background color of selected text with javascript使用 javascript 选择文本的背景颜色
【发布时间】：2013-12-18 16:45:29
【问题描述】：

我有一个 contenteditable="true" 的 div，我想获得 所选文本 的背景颜色。它在 Chrome 中运行良好，但在 Firefox 中一直返回“透明”而失败。现在我尝试这样做。 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'));
});

示例：http://jsfiddle.net/4Wk2X/11/

你知道为什么会这样吗？

【问题讨论】：

你能把你使用的代码贴出来吗？
我刚刚发布了一个指向 jsfiddle 的链接。
可能与this question相关
不，不相关。

标签： javascript firefox backcolor

【解决方案1】：

我让它像这样工作：

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

见fiddle

【讨论】：

我需要选中文本的背景色，而不是div的背景色。
我需要所选文本的背景，而不是 div 内文本的颜色。见jsfiddle.net/4Wk2X/11。如果我选择文本的红色部分，那么它应该给出红色背景。如果我选择黄色的，它应该返回黄色。
您必须将所选文本包装在一个跨度中，然后获取其中文本的颜色。有一个 Range 模块可以帮助您解决这个问题。请参阅：stackoverflow.com/questions/6328718/… 和 stackoverflow.com/questions/5809310/…

【解决方案2】：

我设法通过使用选择的父级然后使用 CSS background-color 属性使其工作。

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

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

【讨论】：

【解决方案3】：

$(window.getSelection().focusNode.parentNode).css('background-color') 有效。

$(window.getSelection().focusNode.parentNode) 找到你的 text 的父节点，它是具有相关 css 属性的父节点。

更准确地说，我们将获取您结束选择的节点的父节点。如果要开始选择，可以使用$(window.getSelection().anchorNode.parentNode)。由于选择可以包含许多背景颜色，因此您必须进行选择。

【讨论】：

全选红色文字无效。它会得到错误的父母。

【解决方案4】：

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

效果很好。

【讨论】：

【解决方案5】：

这是我的想法（不是测试）：

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

【讨论】：

好像anchorNode没有样式。
但它是一个节点文本对象，对吧？我正在尝试某种方式，嗨。使用 jquery 时很棒
这里出事了！它不工作。因为它似乎没有背景色