正文

如何用JavaScript轻松实现文字高亮显示

/0 浏览量
0403

在网页开发中，文字高亮显示是一种常见的交互效果，它可以用来吸引用户的注意力，突出显示特定的信息。使用JavaScript实现文字高亮显示的方法有很多种，以下是一些简单易行的方法。

1. 使用<span>标签

这种方法是最简单的，通过在需要高亮的文字周围包裹<span>标签，并设置特定的CSS样式来实现。

HTML 示例

<p>这是一段普通的文字，<span class="highlight">这里将被高亮显示</span>。</p>

CSS 示例

.highlight {
    background-color: yellow;
    font-weight: bold;
}

2. 使用JavaScript改变样式

如果你需要在用户交互时才进行高亮显示，可以使用JavaScript动态地改变元素的样式。

HTML 示例

<p id="text">这是一段普通的文字，<span id="highlight">这里将被高亮显示</span>。</p>
<button onclick="highlightText()">高亮显示</button>

JavaScript 示例

function highlightText() {
    var text = document.getElementById('highlight');
    text.style.backgroundColor = 'yellow';
    text.style.fontWeight = 'bold';
}

3. 使用第三方库

如果你需要更复杂的高亮显示效果，可以使用第三方库，如highlight.js。

安装

首先，你需要通过npm安装highlight.js。

npm install highlight.js

HTML 示例

<div class="hljs"><pre><code class="javascript">function highlightText() {
    var text = document.getElementById('highlight');
    text.style.backgroundColor = 'yellow';
    text.style.fontWeight = 'bold';
}</code></pre></div>
<button onclick="highlightText()">高亮显示</button>

CSS 示例

.hljs {
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

JavaScript 示例

hljs.initHighlightingOnLoad();

总结

以上方法都可以实现文字高亮显示，选择哪种方法取决于你的具体需求和喜好。对于简单的需求，使用<span>标签和CSS样式就足够了；而对于更复杂的效果，可以考虑使用第三方库。希望这些方法能帮助你轻松实现文字高亮显示。

-- 展开阅读全文 --