<!-- 操作元素总结 -->
<!-- 操作元素内容 操作常见元素属性 操作表单元素属性 操作元素样式属性 -->
<!-- 元素内容 innerText innerHTML -->
<!-- 常见元素属性 src href title alt等 -->
<!-- 表单元素属性 type value disabled等 -->
<!-- 元素样式属性 element.style className -->
作业1.显示隐藏内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
color: #999;
border: 1px solid pink;
}
</style>
</head>
<body>
<!-- 操作元素总结 -->
<!-- 操作元素内容 操作常见元素属性 操作表单元素属性 操作元素样式属性 -->
<!-- 元素内容 innerText innerHTML -->
<!-- 常见元素属性 src href title alt等 -->
<!-- 表单元素属性 type value disabled等 -->
<!-- 元素样式属性 element.style className -->
<input type="text" value="邮箱或账号" class="ipt">
<script>
var inp = document.querySelector('input');
inp.onfocus = function() {
if (this.value === '邮箱或账号') {
this.value = '';
}
this.style.color = '#333';
}
inp.onblur = function() {
if (this.value === '') {
this.value = '邮箱或账号';
}
this.style.color = '#999';
}
</script>
</body>
</html>
效果
--》-》
作业2 开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>开关灯</button>
<script>
var btn = document.querySelector('button');
var flag = 0;
btn.onclick = function() {
if (flag == 0) {
document.body.style.backgroundColor = 'pink';
flag = 1;
} else {
document.body.style.backgroundColor = 'black';
flag = 0;
}
}
</script>
</body>
</html>
效果:
--》--》
作业3:下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
/* background-color: red; */
/* width: 800px; */
}
#fold {
margin: 100px auto;
width: 85%;
}
#fold>li {
float: left;
width: 100px;
text-align: center;
}
#fold>li>a {
background-color: lightgray;
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
color: orange;
text-decoration: none;
}
#fold>li>ul {
display: none;
}
#fold>li>ul li:hover {
background-color: darkorange;
}
</style>
</head>
<body>
<div id="container">
<ul id="fold">
<li>
<a href="#">微博</a>
<ul>
<li>评论</li>
<li>店铺</li>
<li>发文</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>评论</li>
<li>店铺</li>
<li>发文</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>评论</li>
<li>店铺</li>
<li>发文</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>评论</li>
<li>店铺</li>
<li>发文</li>
</ul>
</li>
</ul>
</div>
<script>
//获取li元素对象
var uls = document.querySelector('#fold');
var lis = uls.children; //获取uls节点下面的所有子元素节点
// console.log(lis);
//循环给每个li注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</html>
效果: