<1> CSS_DOM
1,structural layer
2,presentation layer
3,behavior layer
style也是一个属性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><p id="text" style="background-color: #222222;color: white;">Hello World</p><script src="cp_10.js"></script></body></html>
js:
function someTest() { ???var text = document.getElementById(‘text‘); ???console.log(typeof text,"text:",text); ???console.log(typeof text.nodeName , "nodeName:",text.nodeName); ???console.log(typeof text.style ,"style:",text.style);}someTest();
output:
获取样式属性:
color="white"
alert(text.style.color);
color:#cc6600;
<2>设置样式的各种方法:
<p style="....."> </p>
这样的并不好，需要外部文件分离:
如果要设置文档所有的<p> 元素CSS:
p{ ???background-color: #333333; ???color: white;}如果要设置文档id为text的<p>元素 CSS:
p#text{ ???background-color: #333333; ???color: white;}如果要设置文档id为text的元素CSS:
#text{ ???background-color: #333333; ???color: white;}如果要设置文档class为textClass的元素CSS:
.textClass{ ???background-color: #333333; ???color: white;}但是这样的方式在DOM中会无法获取样式,不过在DOM里设置可以.
window.onload= function () { ???var text = document.getElementById(‘text‘); ???text.style.backgroundColor="#222222"; ???text.style.color = "white";}.
Web从入门到放弃<5>
原文地址：https://www.cnblogs.com/gearslogy/p/8143795.html