十三、前端基本功：DOM练习
生活随笔
收集整理的這篇文章主要介紹了
十三、前端基本功：DOM练习
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2020/5/30
作者介紹：Runsen目前大三下學期，專業(yè)化學工程與工藝，大學沉迷日語，Python， Java和一系列數(shù)據(jù)分析軟件。導致翹課嚴重，專業(yè)排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。
文章目錄
- DOM練習
- 布局
- 代碼
在之前的文章中，DOM（Document Object Model）是用來操作 XMl 和 HTML 文檔的應用程序接口，也是前端中的基礎中的基礎。
在使用一些高效的API，優(yōu)先使用document.getElementById,而document.querySelector和document.querySelectorAll在性能上和getElementsBy*API相比較慢。
DOM練習
舉例：移動圖片，圖標的切換。效果如下圖所示。
布局
大圖用背景填充，五張小圖用標簽<li>進行填充，因此 需要設置 padding-top和widt相同。
`
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;}#box{border: 1px solid #cccccc;width: 360px;height: 70px;padding-top: 360px;margin: 100px auto;background: url("images/01big.jpg") no-repeat;}ul{display: flex;justify-content: center;align-items: center;cursor: pointer;}</style> </head> <body><div id="box"><ul><li><img src="images/01.jpg" alt=""></li><li><img src="images/02.jpg" alt=""></li><li><img src="images/03.jpg" alt=""></li><li><img src="images/04.jpg" alt=""></li><li><img src="images/05.jpg" alt=""></li></ul></div> <script>window.onload = function () {// 1. 獲取需要的標簽var box = document.getElementById("box");var allLi = box.getElementsByTagName("li");// 2. 監(jiān)聽鼠標的進入for(var i=0; i<allLi.length; i++){var sLi = allLi[i];sLi.index = i+1;sLi.onmouseover = function () {console.log(this.index);box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';}}} </script> </body> </html>素材下載；https://download.csdn.net/download/weixin_44510615/12477180
總結(jié)
以上是生活随笔為你收集整理的十三、前端基本功：DOM练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度有钱花可以借几笔 只要有额度就可以
- 下一篇： 十九、前端必学Bootstrap美化（下