JS中DOM操作初級練習
1、操作元素:
非表單元素:
obj.innerHTML=XXXX;//直接操作
var n=document.getElementById("bt1");//先賦值,再操作
n.innerHTML=XXXX;
表單元素
obj.value;
obj.value=123;
2、操作樣式//這種只能操作內嵌
obj.style.樣式
obj.style.樣式=值
3、操作屬性
obj.getAttribute("href");獲取指定屬性值
obj.setAttribute("選擇器class","選擇器名btk");設定屬性
obj.removeAttribute();刪除指定屬性
習題練習::
<button id="bt1">我是按鈕</button>
document.getElementById("bt1").innerHTML="你好";
//將按鈕中的文字“我是按鈕”更改為“你好”
.box{
width: 100px;
height: 100px;
background: rgba(173,171,171,1.00);
}
.to{
width: 200px;
height: 200px;
color: aliceblue;
background: #F8070B;
}
<div id="d1" onMouseOver="yc()" onMouseOut="xs()">這是一個按鈕</div>
<button id="bt1" style="display: none">點我</button><br>
//按鈕本身是隱藏的,滑鼠移上時顯示按鈕
<div id="d2" class="box" onMouseOver="bian()" onMouseOut="hui()">
滑鼠經過時本div變高、變色
</div>
//滑鼠移上時放大該div的大小,並改變顏色