这里主要讲解控制样式、控制属性、控制HTML内容、鼠标事件四大块。
一、控制样式
1.结构：获取标签.style.css样式='样式值'
2.注意事项：
①格式： 样式中有中横线的要去除并且中横线后的第一个首字母要大写。
<style>
#box{
width: 100px;
height: 100px;
}
</style>
<body>
<div id="box">控制样式</div>
<script>
box.style.color="red";
box.style.borderTop='1px solid blue'; //去除中横线并且首字母大写
</script>
</body>
在这个例子中，使用社区方法中的直接通过id名获取标签，修改了div的颜色和边框。
②引号：样式值用单引号和双引号包裹都是一样的
box.style.color="red";
box.style.color='red'; //两者是等价的
二、控制属性
1.操作
①.获取属性：获取标签.getAttribute('属性名')
②.修改属性： 获取标签.setAttribute('属性名','属性值')
③.删除属性：获取标签.removeAttribute('属性名')
2.注意事项
类也算是标签的属性，所以可以将样式写在一个类中，通过删除类或者增加类来达到样式的变化效果
<style>
#box{
width: 100px;
height: 100px;
}
.warp{
background: red;
border-radius: 30px;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div id="box">控制属性</div>
<script>
box.setAttribute('class','warp');
// box.getAttribute('class');
// box.removeAttribute('class');
</script>
</body>
三、控制HTML内容
1.什么是HTML内容？
标签的HTML内容指的就是标签开始和结束的那部分
<div>这就是标签的HTML内容</div>
2.获取HTML内容： a.innerHTML
3.修改HTML内容：a.innerHTML='值'
<body>
<div id="warp">这是标签的HTML内容</div>
<script>
console.log(warp.innerHTML);
warp.innerHTML='修改了标签的HTML内容';
console.log(warp.innerHTML);
</script>
</body>
四、鼠标事件
1.事件的声明
获取标签.on+事件类型=function(){代码块}
2.事件源：this
this指事件源，即鼠标事件前面的标签或者理解为用户当前正在操作的标签
li.onclick=function(){
this.style.background='red'; //this指用户当前正在操作的li
}
3.点击事件:获取标签.onclick=function(){代码块}
该事件只有当鼠标点击时才会被触发
4.移入事件和移出事件
①移入事件：
获取标签.onmouseenter=function(){........}
获取标签.onmouseover=function(){.......}
②移出事件：
获取标签.onmouseleave=function(){......}
获取标签.onmouseout=function(){.......}
③注意事项
1.mouseenter和mouseleave一对配对的鼠标移入和移出事件
mouseover和mouseout是另外一对配对的鼠标移入和移出事件
2.鼠标的移入和移出事件可以交叉使用，比如mouseenter和mouseout使用，但是不建议这种用法
3.一般比较常用mouseenter和mouseleave这对事件。因为mouseover和mouseout事件在点击父级事件时，同时会触发子级的事件。
5.改变事件：a.onchange=function(){.....}。仅适用于表单元素。
综合上面的知识点，在此给出下拉菜单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
*{
/* 清除样式 */
margin: 0px;
padding: 0px;
list-style: none;
}
body{
/* 设置整个页面的背景色 */
background: rgba(255, 192, 203, 0.2);
}
#warp{
/* 导航栏的样式 */
background: white;
width: 100%;
height: 42px;
text-align: center;/* 设置li中的文字水平居中 */
line-height: 40px;/* 设置li中的文字垂直居中 */
}
ul>li{
/* 一级菜单的样式 */
float: left;
width: 80px;
height: 42px;
margin-right: 20px;
cursor: pointer;/* 鼠标移出，出现小手的形状 */
color: grey;
position: relative;
/* o二级菜单绝地定位的参照物 */
}
ul>li:hover{
/* 鼠标经过的颜色变化 */
color: #ff9d00;
border-bottom: 2px solid #ff9d00;
}
#warpsmall{
/* 包裹二级菜单的ol的样式 */
width: 80px;
cursor: pointer;
color: grey;
position: absolute;
top: 44px;
background: white;
text-align: center;/* 设置li中的文字水平居中 */
line-height: 40px;/* 设置li中的文字垂直居中 */
display: none;
}
#warpsmall>li{
/* 二级菜单的样式 */
width: 80px;
height: 40px;
cursor: pointer;
color: grey;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul id="warp">
<li>首页</li>
<li>目的地</li>
<li>旅游攻略</li>
<li id="list">去旅游
<ol id="warpsmall">
<li>自由行</li>
<li>跟团游</li>
<li>自驾游</li>
</ol>
</li>
</ul>
<script>
// 通过id名获取标签
var olist=document.getElementById('list');
var owarpsmall=document.getElementById('warpsmall');
// 为一级菜单绑定鼠标移入移出事件：鼠标移入，显示二级菜单；鼠标移出，隐藏二级菜单
olist.onmouseenter=function(){
owarpsmall.style.display='block';
}
olist.onmouseleave=function(){
owarpsmall.style.display='none';
}
// 为二级菜单绑定鼠标移入移出事件：鼠标移入，颜色改变；鼠标移出，回复原来的颜色
for(var i=0;i<owarpsmall.children.length;i++){
owarpsmall.children[i].onmouseenter=function(){
this.style.color='#ff9d00';
}
owarpsmall.children[i].onmouseleave=function(){
this.style.color='grey';
}
}
</script>
</body>
</html>
