访问元素的样式
通过link元素包含的外部样式和通过style元素定义的嵌入样式不能直接通过DOM读取，DOM只能读取html元素中style属性定义的样式
1.html代码
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>JavaScript-DOM2和DOM3</title>
6 <meta charset='utf-8' />
7 <script type="text/javascript" src='javascript.js'></script>
8 <link rel="stylesheet" type="text/css" href="demo.css">
9 <style type="text/css">
10 #testText {
11 margin-top: 20px;
12 }
13 </style>
14 </head>
15
16 <body>
17 <p id="testText" style="font-size: 18px;">测试文本</p>
18 </body>
19
20 </html>
2.css代码
1 @charset 'utf-8';
2 * {
3 margin: 0;
4 padding: 0;
5 }
6
7 body {
8 position: relative;
9 }
10
11 #testText {
12 color: red;
13 padding: 5px;
14 }
3.js代码
1 function addLoadEvent(func) {
2 var oldonload = window.onload;
3 if (typeof window.onload != 'function') {
4 window.onload = func;
5 } else {
6 window.onload = function() {
7 oldonload();
8 func();
9 }
10 };
11 }
12 addLoadEvent(one);
13 addLoadEvent(two);
14
15 //DOM2级样式
16 function two() {
17 var testText = document.querySelector('#testText');
18 console.log(testText.style.color); //通过link元素链接的外部样式无法读取
19 console.log(testText.style.backgroundColor); //通过style元素定义的嵌入式样式无法读取
20 console.log(testText.style.fontSize);
21 testText.style.color = '#000';
22 testText.style.float = 'left'; //float为JavaScript中的保留字，不能用作属性名，用cssFloat
23 testText.style.boxShadow = '2px 2px 12px -2px gray'; //css中为box-shadow,JavaScript中使用驼峰式
24 console.log(testText.style.length); //应用给元素的css属性的数量
25 for (var i = 0, len = testText.style.length; i < len; i++) {
26 var pro = testText.style[i]; //testText.style.item(i),获取css属性名
27 var value = testText.style.getPropertyValue(pro); //通过css属性名获取属性值
28 console.log(pro + ':' + value);
29 testText.style.removeProperty('font-size');
30 };
31 }