DOM操作style样式——<link>、<style>、<p style=''>的区别

访问元素的样式

通过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 }

 

posted @ 2015-10-28 15:46  拂水归人  阅读(850)  评论(0)    收藏  举报