小小小小型前端案例

最新推荐文章于 2025-08-20 08:31:22 发布

原创最新推荐文章于 2025-08-20 08:31:22 发布 · 409 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文通过JavaWeb项目的实际例子，展示了如何使用JavaScript的DOM操作来修改图片源、改变文本颜色以及控制复选框状态。作者提供了代码片段，详细解释了如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我们写项目的时候实现的某一个大的功能其实是可以拆分为最最原始的状态，大家写javaweb的项目的时候，出现的页面操作就是javascript的dom对象实现的

小型案例之js的结合修改

这个如大家所看到的直接进行的图片修改，宝子们注意这里需要的是你自己的路径图片哈

配合后续的的单点时间就可以实现动态属性啦

<body>
    <img id="h1" src="./01斗破苍穹动漫网站-马子杭/img01/芸芸/dp19.jpg" alt="">


    <div class="cls">大家好</div>
    <div class="cls">我是你们的菜鸟小木</div>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">动漫
    <input type="checkbox" name="hobby">菜鸟小木

    
</body>
    <script>
        //修改图片操作
       var img = document.getElementById("h1");
       img.src="img01/dp123.jpg"
    //    img.src="./01斗破苍穹动漫网站-马子杭/img01/芸芸/dp28.jpg"
        //修改属性
        var cl=document.getElementsByClassName("cls")
        for (let index = 0; index < cl.length; index++) {
            const element = cl[index];
            element.innerHTML+="<font color='red'>very good</font>"
            
        }
        //选中
      var c= document.getElementsByName("hobby")
      for (let index = 0; index < c.length; index++) {
        const element = c[index];
        element.checked=true;
      }
    </script>

这个是我注释掉script标签后的展示效果