Question

HI，我正在尝试在Javascript中开发一些代码，将突出显示的文本添加到类中。我想要实现的是使用自定义颜色进行文本突出显示的能力。

我希望它看起来如下：

window.getSelected = "<span class=\"highlighted\">" + window.getSelected + "</span>"

执行上述代码后，所选文本的背景将被span标记包围。

感谢，

FBR

Answer 1

你想看看Range Objects，这里有一个很好的总结：

http://www.quirksmode.org/dom/range_intro.html

浏览器兼容性将是一个问题，但基本上，您可以按照建议的方式获取当前选择，然后将其转换为Range，并使用Range对象的方法来查找和拆分现有DOM节点，以及插入包含所选文字的<span>标记。

这并非完全无足轻重，而是涉及进行严格的DOM操作，但这是一个有益的主题。享受！

Answer 2

如果您使用jQuery framework，可以尝试使用以下代码：

var your_color = 'yellow';
$('.your-class').css('background-color', your_color);

如果你没有使用它，我强烈建议你开始;它使事情变得更容易，它非常稳定，并被许多流行的网站使用，包括谷歌和堆栈溢出本身。

Answer 3

原谅我的英语，你的意思是在课堂上添加一个课程吗？

function changeClass (elementID, newClass) {
    var element = document.getElementById(elementID);
    element.setAttribute("class", newClass); // This is for good browsers
    element.setAttribute("className", newClass); //For IE<
}

留下所有线条，如果你这样做就无害。

Answer 4

如果您正在讨论样式化原生选择，请在CSS中使用::selection和::-moz-selection。

::selection {
  color: ...;
  background-color: ...;
}

::-moz-selection {
  color: ...;
  background-color: ...;
}

或者，如果要使用类突出显示任意元素：

CSS

.highlighted {
  color: ...;
  background-color: ...;
}

的JavaScript

yourElement.className = "highlighted";

使用Javascript处理突出显示的文本

4 个答案:

CSS

的JavaScript