??這里主要講解控制樣式、控制屬性猎物、控制HTML內(nèi)容虎囚、鼠標(biāo)事件四大塊。
一蔫磨、控制樣式
1.結(jié)構(gòu)：獲取標(biāo)簽.style.css樣式='樣式值'
2.注意事項(xiàng)：
①格式： 樣式中有中橫線的要去除并且中橫線后的第一個首字母要大寫淘讥。
<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>
??在這個例子中，使用社區(qū)方法中的直接通過id名獲取標(biāo)簽堤如，修改了div的顏色和邊框蒲列。
②引號：樣式值用單引號和雙引號包裹都是一樣的
box.style.color="red";
box.style.color='red'; //兩者是等價的
二、控制屬性
1.操作
①.獲取屬性：獲取標(biāo)簽.getAttribute('屬性名')
②.修改屬性： 獲取標(biāo)簽.setAttribute('屬性名','屬性值')
③.刪除屬性：獲取標(biāo)簽.removeAttribute('屬性名')
2.注意事項(xiàng)
??類也算是標(biāo)簽的屬性搀罢，所以可以將樣式寫在一個類中蝗岖，通過刪除類或者增加類來達(dá)到樣式的變化效果
<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內(nèi)容
1.什么是HTML內(nèi)容榔至？
??標(biāo)簽的HTML內(nèi)容指的就是標(biāo)簽開始和結(jié)束的那部分
<div>這就是標(biāo)簽的HTML內(nèi)容</div>
2.獲取HTML內(nèi)容： a.innerHTML
3.修改HTML內(nèi)容：a.innerHTML='值'
<body>
<div id="warp">這是標(biāo)簽的HTML內(nèi)容</div>
<script>
console.log(warp.innerHTML);
warp.innerHTML='修改了標(biāo)簽的HTML內(nèi)容';
console.log(warp.innerHTML);
</script>
</body>
四抵赢、鼠標(biāo)事件
1.事件的聲明
??獲取標(biāo)簽.on+事件類型=function(){代碼塊}
2.事件源：this
??this指事件源，即鼠標(biāo)事件前面的標(biāo)簽或者理解為用戶當(dāng)前正在操作的標(biāo)簽
li.onclick=function(){
this.style.background='red'; //this指用戶當(dāng)前正在操作的li
}
3.點(diǎn)擊事件:獲取標(biāo)簽.onclick=function(){代碼塊}
該事件只有當(dāng)鼠標(biāo)點(diǎn)擊時才會被觸發(fā)
4.移入事件和移出事件
①移入事件：
獲取標(biāo)簽.onmouseenter=function(){........}
獲取標(biāo)簽.onmouseover=function(){.......}
②移出事件：
獲取標(biāo)簽.onmouseleave=function(){......}
獲取標(biāo)簽.onmouseout=function(){.......}
③注意事項(xiàng)
??1.mouseenter和mouseleave一對配對的鼠標(biāo)移入和移出事件
mouseover和mouseout是另外一對配對的鼠標(biāo)移入和移出事件
??2.鼠標(biāo)的移入和移出事件可以交叉使用唧取，比如mouseenter和mouseout使用铅鲤，但是不建議這種用法
??3.一般比較常用mouseenter和mouseleave這對事件。因?yàn)閙ouseover和mouseout事件在點(diǎn)擊父級事件時枫弟，同時會觸發(fā)子級的事件邢享。
5.改變事件：a.onchange=function(){.....}。僅適用于表單元素淡诗。
綜合上面的知識點(diǎn)骇塘，在此給出下拉菜單的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
*{
/* 清除樣式 */
margin: 0px;
padding: 0px;
list-style: none;
}
body{
/* 設(shè)置整個頁面的背景色 */
background: rgba(255, 192, 203, 0.2);
}
#warp{
/* 導(dǎo)航欄的樣式 */
background: white;
width: 100%;
height: 42px;
text-align: center;/* 設(shè)置li中的文字水平居中 */
line-height: 40px;/* 設(shè)置li中的文字垂直居中 */
}
ul>li{
/* 一級菜單的樣式 */
float: left;
width: 80px;
height: 42px;
margin-right: 20px;
cursor: pointer;/* 鼠標(biāo)移出，出現(xiàn)小手的形狀 */
color: grey;
position: relative;
/* o二級菜單絕地定位的參照物 */
}
ul>li:hover{
/* 鼠標(biāo)經(jīng)過的顏色變化 */
color: #ff9d00;
border-bottom: 2px solid #ff9d00;
}
#warpsmall{
/* 包裹二級菜單的ol的樣式 */
width: 80px;
cursor: pointer;
color: grey;
position: absolute;
top: 44px;
background: white;
text-align: center;/* 設(shè)置li中的文字水平居中 */
line-height: 40px;/* 設(shè)置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>跟團(tuán)游</li>
<li>自駕游</li>
</ol>
</li>
</ul>
<script>
// 通過id名獲取標(biāo)簽
var olist=document.getElementById('list');
var owarpsmall=document.getElementById('warpsmall');
// 為一級菜單綁定鼠標(biāo)移入移出事件：鼠標(biāo)移入韩容，顯示二級菜單款违；鼠標(biāo)移出，隱藏二級菜單
olist.onmouseenter=function(){
owarpsmall.style.display='block';
}
olist.onmouseleave=function(){
owarpsmall.style.display='none';
}
// 為二級菜單綁定鼠標(biāo)移入移出事件：鼠標(biāo)移入宙攻，顏色改變奠货；鼠標(biāo)移出，回復(fù)原來的顏色
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>
