使用Javascript更改所选文本的CSS [英] Change CSS of selected text using Javascript

问题描述

我尝试制作一个JavaScript书签，作为荧光笔，在按下书签时将网页上所选文字的背景更改为黄色。 >我使用下面的代码来获取所选的文本，它工作正常，返回正确的字符串

  function getSelText ）{
 var SelText =''; 
 if（window.getSelection）{
 SelText = window.getSelection（）; 
} else if（document.getSelection）{
 SelText = document.getSelection（）; 
} else if（document.selection）{
 SelText = document.selection.createRange（）。text; 
} 
 return SelText; 
  

}

类似的函数使用jQuery改变所选文本的CSS，它不工作：

  function highlightSelText（）{
 var SelText; 
 if（window.getSelection）{
 SelText = window.getSelection（）; 
} else if（document.getSelection）{
 SelText = document.getSelection（）; 
} else if（document.selection）{
 SelText = document.selection.createRange（）。text; 
} 
 $（SelText）.css（{'background-color'：'yellow'，'font-weight'：'bolder'}）; 
  

}

p>

解决方案

最简单的方法是使用 execCommand（）具有在所有现代浏览器中更改背景颜色的命令。

以下内容应该在任何选择上执行，包括跨多个元素。在非IE浏览器中，它会打开 designMode ，应用背景颜色，然后再次切换 designMode 。

UPDATE

在IE 9中修正。

  function makeEditableAndHighlight（color）{
 var range，sel = window.getSelection（）; 
 if（sel.rangeCount& sel.getRangeAt）{
 range = sel.getRangeAt（0）; 
} 
 document.designMode =on; 
 if（range）{
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
} 
 //使用HiliteColor，因为一些浏览器将BackColor应用到整个块
 if（！document.execCommand（HiliteColor，false，color））{
 document.execCommand （BackColor，false，color）; 
} 
 document.designMode =off; 
} 
 
函数高亮（颜色）{
 var range，sel; 
 if（window.getSelection）{
 // IE9和非IE 
 try {
 if（！document.execCommand（BackColor，false，color））{
 makeEditableAndHighlight（color）; 
} 
} catch（ex）{
 makeEditableAndHighlight（color）
} 
} else if（document.selection& document.selection.createRange）{ 
 // IE< = 8 case 
 range = document.selection.createRange（）; 
 range.execCommand（BackColor，false，color）; 
} 
} 
  

I'm trying to make a javascript bookmarklet that will act as a highlighter, changing the background of selected text on a webpage to yellow when the bookmarklet is pressed.

I'm using the following code to get the selected text, and it works fine, returning the correct string

function getSelText() {
var SelText = '';
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
return SelText;

}

However, when I created a similar function to change the CSS of the selected text using jQuery, it isn't working:

function highlightSelText() {
var SelText;
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
$(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

}

Any ideas?

解决方案

The easiest way to do this is to use execCommand(), which has a command to change the background colour in all modern browsers.

The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

UPDATE

Fixed in IE 9.

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

这篇关于使用Javascript更改所选文本的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！