html js鼠标样式,js入门系列（4）--控制样式、属性、HTML内容、鼠标事件

这里主要讲解控制样式、控制属性、控制HTML内容、鼠标事件四大块。

一、控制样式

1.结构：获取标签.style.css样式='样式值'

2.注意事项：

①格式： 样式中有中横线的要去除并且中横线后的第一个首字母要大写。

#box{

width: 100px;

height: 100px;

}

控制样式

box.style.color="red";

box.style.borderTop='1px solid blue'; //去除中横线并且首字母大写

在这个例子中，使用社区方法中的直接通过id名获取标签，修改了div的颜色和边框。

②引号：样式值用单引号和双引号包裹都是一样的

box.style.color="red";

box.style.color='red'; //两者是等价的

二、控制属性

1.操作

①.获取属性：获取标签.getAttribute('属性名')

②.修改属性： 获取标签.setAttribute('属性名','属性值')

③.删除属性：获取标签.removeAttribute('属性名')

2.注意事项

类也算是标签的属性，所以可以将样式写在一个类中，通过删除类或者增加类来达到样式的变化效果

#box{

width: 100px;

height: 100px;

}

.warp{

background: red;

border-radius: 30px;

text-align: center;

line-height: 100px;

}

控制属性

box.setAttribute('class','warp');

// box.getAttribute('class');

// box.removeAttribute('class');

三、控制HTML内容

1.什么是HTML内容？

标签的HTML内容指的就是标签开始和结束的那部分

这就是标签的HTML内容

2.获取HTML内容： a.innerHTML

3.修改HTML内容：a.innerHTML='值'

这是标签的HTML内容

console.log(warp.innerHTML);

warp.innerHTML='修改了标签的HTML内容';

console.log(warp.innerHTML);

控制HTML内容.png

四、鼠标事件

1.事件的声明

获取标签.on+事件类型=function(){代码块}

2.事件源：this

this指事件源，即鼠标事件前面的标签或者理解为用户当前正在操作的标签

li.οnclick=function(){

this.style.background='red'; //this指用户当前正在操作的li

}

3.点击事件:获取标签.οnclick=function(){代码块}

该事件只有当鼠标点击时才会被触发

4.移入事件和移出事件

①移入事件：

获取标签.οnmοuseenter=function(){........}

获取标签.οnmοuseοver=function(){.......}

②移出事件：

获取标签.οnmοuseleave=function(){......}

获取标签.οnmοuseοut=function(){.......}

③注意事项

1.mouseenter和mouseleave一对配对的鼠标移入和移出事件

mouseover和mouseout是另外一对配对的鼠标移入和移出事件

2.鼠标的移入和移出事件可以交叉使用，比如mouseenter和mouseout使用，但是不建议这种用法

3.一般比较常用mouseenter和mouseleave这对事件。因为mouseover和mouseout事件在点击父级事件时，同时会触发子级的事件。

5.改变事件：a.οnchange=function(){.....}。仅适用于表单元素。

综合上面的知识点，在此给出下拉菜单的案例

事件

*{

/* 清除样式 */

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;

}

• 首页
• 目的地
• 旅游攻略
• 去旅游
  1. 自由行
  2. 跟团游
  3. 自驾游

// 通过id名获取标签

var olist=document.getElementById('list');

var owarpsmall=document.getElementById('warpsmall');

// 为一级菜单绑定鼠标移入移出事件：鼠标移入，显示二级菜单；鼠标移出，隐藏二级菜单

olist.οnmοuseenter=function(){

owarpsmall.style.display='block';

}

olist.οnmοuseleave=function(){

owarpsmall.style.display='none';

}

// 为二级菜单绑定鼠标移入移出事件：鼠标移入，颜色改变；鼠标移出，回复原来的颜色

for(var i=0;i

owarpsmall.children[i].οnmοuseenter=function(){

this.style.color='#ff9d00';

}

owarpsmall.children[i].οnmοuseleave=function(){

this.style.color='grey';

}

}

下拉菜单效果图.gif