<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
<style>
p {
width: 200px;
margin: 0 auto;
color: #0b597d;
padding-top: 100px;
}
ul {
width: 240px;
margin: 0 auto;
color: #00B83F;
list-style: none;
list-style: url("timg.jpg");
}
div {
width: 400px;
margin: 0 auto;
}
#btn{
border-bottom: 1px solid #c5c5c5;
margin:10px 0 0 10px;
background:red;
color:#fff;
width:150px;
height:30px;
font:14px Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>
<p>首富朱老师的上午安排</p>
<ul>
<li>4:00 起床</li>
<li>4:15-5:00 健身</li>
<li>5:00-5:30 早餐</li>
<li>5:45-6:30 前往机场</li>
<li>7:00-12:15 雅加达飞海口</li>
<li>12:20-12:45 到达海南迎宾馆</li>
<li>12:45-13:00 海南领导会见</li>
</ul>
<button id="btn">忙啊</button>
</div>
<script>
var btn =document.getElementById('btn')//获取按钮
btn.onclick=function () {//按钮点击事件
//querySelectorAll获取全部li元素
var li =document.querySelectorAll('li')
for (var i=0;i<li.length;i++){//for循环给所有的li元素加上背景色
li[i].style.background='whitesmoke'
}
// querySelector获取li元素
document.querySelector('li').style.background='whitesmoke'
// $('li').css('background','red')
}
</script>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
