使用Javascript來回更改背景顏色？

Question

我正在開發Chrome擴展程序。 我在這里有此功能：

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

我用它突出顯示（從背景色變為黃色）一段選定的文本。 問題在於取消突出顯示它。

我這樣做：

function body() {
    document.getElementsByTagName("body")[0].addEventListener(
    "click", 
    function(event){
      highlight('transparent');
    }
  );
}

問題是：

1）它仍然需要選擇文本，但是單擊將其取消選中，因此僅當您重新選擇完全相同的文本並實際單擊“打開”時它才起作用。

2）似乎使頁面運行慢得多，甚至有時將其鎖定。

我想做的是這樣的：

當我單擊任意位置時，將取消突出顯示和取消選中文本（基本上，將高亮設置為透明或取消選中文本之前的設置）。

做什么？

PS-僅Java語言。 如果您有使用jQuery的方法，請告訴我，但是請記住，我必須在為Chrome擴展程序提交的content.js中使用它。

Answer 1

使用可以使用以下代碼來突出顯示。 這會很好。 :)

document.designMode = 'on';
document.execCommand("undo", false, 'span');
document.designMode = 'off';

在此，“ span”是創建元素。

document.execCommand("HiliteColor", false, colour)