背景 標簽 yellow html 顏色 操作 div att getattr

Dom操作

dom操作：找到元素 操作元素
找元素(標簽對象)
標簽名
document.getElementsByTagName();
屬性
document.getElementById(); id屬性值
document.getElementsByName(); name屬性值

document.getElementsByClassName(); class屬性值
操作元素
操作內容
非表單元素
標簽對象.innerHTML //獲取標簽內容
標簽對象.innerHTML= 123 //修改標簽內容
表單元素
標簽對象.varlue //獲取標簽內容
標簽對象.varlue = 123 //修改標簽內容
操作屬性
標簽對象.getAttribute("屬性名"); //獲取標簽屬性值
標簽對象.setAttribute("屬性名","值"); //設置標簽屬性值
操作樣式
標簽對象.style.color //獲取標簽樣式值
標簽對象.style.color = "red" //設置標簽樣式值
// 添加事件
//添加刪除標簽

例題：

body裏面寫的
<div id="z16_" style=" height: 100px; width: 400px;background-color: #E0DBDB;">
    <button onClick="z16()">點擊變黃</button>
    <button onClick="z26()">點擊變紅</button>
    <button onClick="z36()">點擊變黑</button>
    <button onClick="z46()">點擊恢復</button
 
>
</div>

js裏面寫的:
 點擊變黃 變紅 變黑 恢復
function z16(){
    //找到id為z16_的div把背景顏色改成黃色
    document.getElementById("z16_").style.backgroundColor="yellow";
}
function z26(){
    //找到id為z16_的div把背景顏色改成紅色
    document.getElementById("z16_").style.backgroundColor="red";
}
function z36(){
    //找到id為z16_的div把背景顏色改成黑色
    document.getElementById("z16_").style.backgroundColor="black";
}
function  z46(){
    //找到id為z16_的div把背景顏色改成原色
    document.getElementById("z16_").style.backgroundColor="#E0DBDB";
}

View Code

2018年3月23號 Dom操作