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的大小，并改变颜色

转载于:https://www.cnblogs.com/xwenbin/p/9995436.html