如何使用 JavaScript 更改选定文本的背景颜色？-css教程-PHP中文网

如何使用 JavaScript 更改选定文本的背景颜色？

Susan Sarandon

发布： 2024-11-20 01:22:03

原创

872 人浏览过

How to Change the Background Color of Selected Text with JavaScript?

如何使用 JavaScript 更改所选文本的 CSS

为了增强网页功能，您可能需要创建一个 JavaScript 书签突出显示选定的文本，将其背景更改为黄色。虽然您可以使用 getSelText() 轻松检索文本，但在尝试使用 jQuery 的highlightSelText() 函数更改其 CSS 时可能会遇到困难。

出现此问题的原因是highlightSelText() 无法更改 CSS所选文本的。更有效的解决方案是使用 execCommand() 方法，该方法提供了修改当代浏览器中背景颜色的命令。以下是利用此功能的更新代码片段：

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 &amp;&amp; document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

登录后复制

此函数利用 execCommand() 将所需的背景颜色应用于所选文本，确保与所有主要浏览器（包括 Internet Explorer）的兼容性。

以上是如何使用 JavaScript 更改选定文本的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！