访问元素的样式
通过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) { 2var 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 }
