查找-高亮

最新推荐文章于 2022-09-02 22:01:14 发布

alo_ne

最新推荐文章于 2022-09-02 22:01:14 发布

阅读量155

点赞数

分类专栏： js-案例

本文链接：https://blog.csdn.net/alo_ne/article/details/106518976

版权

js-案例专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在这里插入图片描述
思路
1、获取所需元素
2、监听点击事件判断输入的内容是否包含
3、包含则先转为数组之后把颜色放进去在转为字符串后赋值回去

    <style>
        .box {
            width: 300px;
            border: 5px solid #ccc;
            background-color: rgb(245, 245, 209);
            margin-top: 10px;
            padding: 10px;
        }

        span {
            color: red;
        }
    </style>

<body>
    <input type="text"> <button>查找</button>
    <div class="box">
        百度在面对用户的搜索产品不断丰富的同时,百度还创新性地推出了基于搜索的营销推广服务,并成为最受企业青睐的互联网营 销推广平台。目前,中国已有数十万家企业使用了百度的搜索推广服务,不断提升着企业自身的品牌及运营效率。……
    </div>
    <script>
        let txt = document.querySelector('input')
        let btn = document.querySelector('button')
        let box = document.querySelector('.box')
        btn.onclick = function () {
            if (!box.innerHTML.includes(txt.value)) alert('请输入正确的内容')
            else
                box.innerHTML = box.innerHTML.split(txt.value).join(`<span "style=color:red">${txt.value}</span>`)
        }
    </script>
</body>

alo_ne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
查找-高亮

思路1、获取所需元素2、监听点击事件判断输入的内容是否包含3、包含则先转为数组之后把颜色放进去在转为字符串后赋值回去 <style> .box { width: 300px; border: 5px solid #ccc; background-color: rgb(245, 245, 209); margin-top: 10px; pad.
复制链接

扫一扫