DOM事件练习1
1. 演示效果
2. 分析思路
用 ul 创建四个 li 列表 整个列表的背景是红色的,鼠标悬浮在列表上,一行的变为蓝色 点击任意列表,整个列表的背景变为白色,被点击的列表变为粉色 需要用到 js 的点击事onclick 件和forEach 循环
3. 代码实现
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" />
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" />
< title> Document</ title>
< style>
li {
width : 100%;
height : 30px;
background-color : rgb ( 226, 76, 76) ;
border : 1px soild #ccc;
list-style : none;
cursor : pointer;
}
li:hover {
background-color : rgb ( 15, 157, 227) ;
}
</ style>
</ head>
< body>
< li> 我是列表1</ li>
< li> 我是列表2</ li>
< li> 我是列表3</ li>
< li> 我是列表4</ li>
< li> 我是列表5</ li>
< script>
const lis = document. querySelectorAll ( "li" ) ;
console. log ( lis) ;
lis. forEach ( ( li ) => {
li. onclick = ( ) => {
lis. forEach (
( item ) => ( item. style. backgroundColor = "white" )
) ;
li. style. backgroundColor = "pink" ;
} ;
} ) ;
</ script>
</ body>
</ html>