DOM简单应用

最新推荐文章于 2021-11-29 09:10:03 发布

Inory_ye

最新推荐文章于 2021-11-29 09:10:03 发布

阅读量128

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Inory_ye/article/details/114482600

版权

该博客介绍了如何使用JavaScript操作DOM来实现动态效果。首先在文档中展示了100个小方块，然后通过JS部分的代码来完成案例。

摘要由CSDN通过智能技术生成

预览图

在这里插入图片描述
这里只展示静态的图片，动态的效果就用代码演示了；

1先要在文档中显示100个小方块

<ul id="father">
        <li style="top: 0px;left: 0px;"></li>
        <li style="top: 0px;left: 100px;"></li>
        <li style="top: 0px;left: 200px;"></li>
        <li style="top: 0px;left: 300px;"></li>
        <li style="top: 0px;left: 400px;"></li>
        <li style="top: 0px;left: 500px;"></li>
        <li style="top: 0px;left: 600px;"></li>
        <li style="top: 0px;left: 700px;"></li>
        <li style="top: 0px;left: 800px;"></li>
        <li style="top: 0px;left: 900px;"></li>
        //后面的可以根据这是个设置
</ul>

这里可以用ul li 写小方块，这样方便，刚开始写样式的时候我用的弹性布局没这样写的时候有一个缺点，
就是点击一个小方块之后其他的小方块也会移动这样不是我们想要的效果，所以我们可以用子绝父相布局。