<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"; }
.