當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS根据文本框内容匹配并高亮显示

發(fā)布時(shí)間：2025/3/11 javascript 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS根据文本框内容匹配并高亮显示小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">function SearchCompare() {// 獲取搜索字符串var searchText = document.getElementById("SearchCompare.Text").value;// 根據(jù)開始和結(jié)束標(biāo)記來(lái)進(jìn)行循環(huán)var begin = 1;var end = 7;for (var i = begin; i < end; i++) {// 拼接Element元素的名稱var itemName = "li" + i;var itemContent = document.getElementById(itemName).innerText;if(itemContent.indexOf(searchText) > -1){// 設(shè)置該元素的背景色為紅色document.getElementById(itemName).style.backgroundColor="#f00";}}alert(document.getElementById("SearchCompare.Text").value);}</script></head><body><input type="text" id="SearchCompare.Text" /><input type="button" id="SearchCompare.Button" value="查找" οnclick="SearchCompare()" /><ul>張三<li><a href="#" id="li1">AB</a></li><li><a href="#" id="li2">BC</a></li><li><a href="#" id="li3">CC</a></li><li><a href="#" id="li4">DA</a></li><li><a href="#" id="li5">EA</a></li><li><a href="#" id="li6">FCB</a></li></ul></body></html>

總結(jié)

以上是生活随笔為你收集整理的JS根据文本框内容匹配并高亮显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Listener refused the
下一篇： Spring boot项目（问答网站）之