1 // JavaScript Document 2 3 function $( v ){ 4 if( typeof v === 'function' ){ 5 window.onload = v; 6 } else if ( typeof v === 'string' ) { 7 return document.getElementById(v); 8 } else if ( typeof v === 'object' ) { 9 return v; 10 } 11 } 12 13 function getStyle( obj, attr ){ 14 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 15 }
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div { 100px; height:120px; background:red; } 8 </style> 9 <script src="miaov.js"></script> 10 <script> 11 $(function(){ 12 13 // $('div1').style.width = '300px'; 14 15 16 $('btn1').onclick = function (){ 17 // alert( $('div1').style.width ); 18 // $('div1').style.cssText = '350px;'; 19 20 // alert( getComputedStyle( $('div1') ).width ); // IE6 7 8 不兼容 21 22 // alert( $('div1').currentStyle.width ); // 标准浏览器不兼容 23 /* 24 if( $('div1').currentStyle ){ 25 alert( $('div1').currentStyle.width ); 26 } else { 27 alert( getComputedStyle( $('div1'), 250 ).width ); 28 // FF 4.0 之前 29 } 30 */ 31 32 // alert( getStyle( $('div1'), 'width' ) ); 33 // alert( getStyle( $('div1'), 'height' ) ); 34 35 alert( getStyle( $('div1'), 'marginRight' ) ); 36 37 /* 38 获取到的是计算机（浏览器）计算后的样式 39 40 background: url() red …… 复合样式（不要获取） 41 backgroundColor 单一样式（不要用来做判断） 42 43 不要有空格 44 45 不要获取未设置后的样式：不兼容 46 */ 47 }; 48 }); 49 50 51 </script> 52 </head> 53 54 <body> 55 56 <input id="btn1" type="button" value="按钮" /> 57 <div id="div1"></div> 58 59 </body> 60 </html>