首頁猿問使用Java腳本更改所選文本的CSS

使用Java腳本更改所選文本的CSS

JavaScript JQuery Html/CSS

慕容森 2019-11-19 10:11:05

我正在嘗試制作一個將用作熒光筆的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;}但是，當我創(chuàng)建了一個類似的函數來使用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'});}有任何想法嗎？

查看完整描述

3 回答

四季花海

TA貢獻1811條經驗獲得超5個贊

最簡單的方法是使用execCommand()，該命令具有在所有現代瀏覽器中更改背景顏色的命令。

以下應該在任何選擇上做您想要的，包括跨越多個元素的選擇。在非IE瀏覽器中，它會打開designMode，應用背景色，然后designMode再次關閉。

更新

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

}

反對回復 2019-11-19

侃侃無極

TA貢獻2051條經驗獲得超10個贊

這是它如何工作的粗略示例。正如Zack指出的那樣，您需要注意選擇跨越多個元素的情況。這并不是按原樣使用的，只是可以幫助使想法流傳的東西。在Chrome中測試。

var selection = window.getSelection();

var text = selection.toString();

var parent = $(selection.focusNode.parentElement);

var oldHtml = parent.html();

var newHtml = oldHtml.replace(text, "<span class='highlight'>"+text+"</span>");

parent.html( newHtml );

反對回復 2019-11-19

3 回答
0 關注
664 瀏覽

關注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

使用Java腳本更改所選文本的CSS

使用Java腳本更改所選文本的CSS

3 回答

相關問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用Java腳本更改所選文本的CSS

使用Java腳本更改所選文本的CSS

3 回答

相關問題推薦

添加回答