1. 程式人生 > >JS中DOM操作初級練習

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的大小,並改變顏色