Dom--樣式操做

時間 2019-12-07

標籤 dom 樣式欄目 HTML 简体版

原文原文鏈接

1、樣式　　

<body>
    <div>
        <p id="i1" >12345</p>
    </div>
</body>

　　1.1 classNamehtml

　　設置和獲取樣式的類名　　字體

var obj = document.getElementById("i1")

obj
<p id="i1">12345</p>
obj.className = "c1 c2"    // 設置 class 
"c1 c2"
obj.className         // 獲取class
"c1 c2"

　　1.2 classListhtm

　　以列表的形式返回樣式類名　blog

// 獲取列表
obj.classList
DOMTokenList(2) ["c1", "c2", value: "c1 c2"]

// 增長一個類名
obj.classList.add("c3")

obj.classList
DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]

// 刪除一個類名
obj.classList.remove("c2")

obj.classList
DOMTokenList(2) ["c1", "c3", value: "c1 c3"]

　　以上修改樣式的時候，都是以類的形式存在的，但涉及到具體的某個樣式的時候，可能不是很方便。rem

2、修改具體style樣式

　　咱們修改p標籤具體的字符大小、顏色和背景色　　get

var obj = document.getElementById("i1")

obj
<p id="i1">12345</p>

obj.style.color = 'red';   //字體顏色
"red"

obj.style.fontSize = '16px'   //字體大小
"16px"

obj.style.backgroundColor = '#dddddd';   // 背景色
"#dddddd"