需要使用javascript动态更改p::selection和p::-moz-selection背景
需要使用javascript动态更改p::selection和p::-moz-selection背景
提问于 2020-06-13 07:57:49
我正在创建文本荧光笔，但我想将p::selection：：-moz- selection属性设置为高亮显示的选择颜色，使用javascript，我尝试了很多东西，但没有得到解决方案。我的意思是，当我选择段落文本，那么选择的颜色应该是根据我当前选择的颜色动态。
function highlightSelection(colour) {
if (colour == '') {
colour = '#CB7342';
}
var range, sel;
if (window.getSelection) {
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 makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
/* oldtxt.push(chosenText());
oldtxtString = oldtxt.join(' ');
$("#selectedPoem").text(oldtxtString);*/
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}<div id="text" class="selectionContent" ontouchend="highlightSelection(document.getElementById('chooseColor').value)", onmouseup="highlightSelection(document.getElementById('chooseColor').value)">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Duis at tellus at urna condimentum mattis pellentesque. Aliquam vestibulum morbi blandit cursus risus at. Quis risus sed vulputate odio ut.</p>
<p>Sollicitudin aliquam ultrices sagittis orci a scelerisque. Dignissim enim sit amet venenatis urna cursus eget. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Eget arcu dictum varius duis at consectetur lorem donec. Pharetra convallis posuere morbi leo urna molestie at elementum eu.<p>
<p>Cras fermentum odio eu feugiat pretium nibh ipsum. Molestie at elementum eu facilisis sed odio. Odio aenean sed adipiscing diam. Eros in cursus turpis massa tincidunt dui ut ornare. Faucibus interdum posuere lorem ipsum dolor sit. Turpis egestas integer eget aliquet nibh. Adipiscing commodo elit at imperdiet. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Pellentesque dignissim enim sit amet venenatis urna cursus.</p>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-13 08:28:35
考虑CSS变量来调整颜色：
document.querySelector('#chooseColor').addEventListener('input', function(evt) {
document.querySelector('#text').style.setProperty("--c", this.value)
});
function highlightSelection(colour) {
if (colour == '') {
colour = '#CB7342';
}
var range, sel;
if (window.getSelection) {
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 makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
/* oldtxt.push(chosenText());
oldtxtString = oldtxt.join(' ');
$("#selectedPoem").text(oldtxtString);*/
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}*::selection {
background: var(--c);
}<input id="chooseColor" type="color">
<div id="text" class="selectionContent" ontouchend="highlightSelection(document.getElementById('chooseColor').value)" , onmouseup="highlightSelection(document.getElementById('chooseColor').value)">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Duis at tellus at urna condimentum mattis pellentesque.
Aliquam vestibulum morbi blandit cursus risus at. Quis risus sed vulputate odio ut.</p>
<p>Sollicitudin aliquam ultrices sagittis orci a scelerisque. Dignissim enim sit amet venenatis urna cursus eget. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Eget arcu dictum
varius duis at consectetur lorem donec. Pharetra convallis posuere morbi leo urna molestie at elementum eu.
</p>
<p>Cras fermentum odio eu feugiat pretium nibh ipsum. Molestie at elementum eu facilisis sed odio. Odio aenean sed adipiscing diam. Eros in cursus turpis massa tincidunt dui ut ornare. Faucibus interdum posuere lorem ipsum dolor sit. Turpis egestas integer
eget aliquet nibh. Adipiscing commodo elit at imperdiet. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Pellentesque dignissim enim sit amet venenatis urna cursus.</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62357033
复制相关文章
相似问题
腾讯云开发者
