Dom--样式操作

一、样式　　

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

　　1.1 className

　　设置和获取样式的类名　　

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 classList

　　以列表的形式返回样式类名　

// 获取列表
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"]

　　以上修改样式的时候，都是以类的形式存在的，但涉及到具体的某个样式的时候，可能不是很方便。

二、修改具体style样式

　　我们修改p标签具体的字符大小、颜色和背景色　　

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"

　　

 

posted @ 2018-08-06 21:35  Bigberg  阅读(194)  评论(0)  编辑  收藏  举报