JS 操作 DOM 改变方块颜色

最新推荐文章于 2022-09-15 14:13:00 发布

weixin_34023982

最新推荐文章于 2022-09-15 14:13:00 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5ca166ee518825480e1bdf6e

博主分享了自己在复习前端基础知识时，通过JavaScript操作DOM实现的一个小Demo。当鼠标滑过方块时，方块颜色会改变。主要通过获取DOM元素，绑定鼠标悬停事件，并修改子元素的背景色来实现这一功能。

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

由于从转前端一年左右，都是直接接触框架，而并没有踏踏实实学习相关基础，所以，最近开始认认真真，踏踏实实的把基础的东西都过一遍。目前正在学习如何操作 DOM，自己写了个小 Demo，就是鼠标滑过时，改变方块颜色。

思路就是获取 DOM，给 DOM 添加鼠标滑过时触发的事件，通过改变其子元素的背景颜色来实现，核心的 JS 代码如下：

<script type="text/javascript">  
    // 页面加载成功后调用  
    window.onload = function () {    
        // 拿到 ul DOM    
        var ul = document.getElementsByName('ul')[0]    
        // 给 ul 添加事件：鼠标滑过触发事件    
        ul.onmouseover = function (e) {      
            var event = e || window.event // 兼容性问题，有的浏览器拿不到 e      
            var target = event.target || event.srcElement // 兼容性问题，有的浏览器事件源对象不一致，此处的 target 是 li      
            target.style.backgroundColor =