1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>获取css样式</title> 9 </head> 10 <style> 11 #box{ 12 position: absolute; 13 left: 50%; 14 top: 100px; 15 background-color: #fff000; 16 color: blueviolet; 17 font-size: 2em; 18 font-weight: bolder; 19 text-align: center; 20 width: 300px; 21 height: 100px; 22 line-height: 100px; 23 font-style: italic; 24 } 25 </style> 26 <body> 27 <div id="box">ProsperLee</div> 28 <pre> 29 #box{ 30 position: absolute; 31 left: 50%; 32 top: 100px; 33 background-color: #fff000; 34 color: blueviolet; 35 font-size: 2em; 36 font-weight: bolder; 37 text-align: center; 38 300px; 39 height: 100px; 40 line-height: 100px; 41 font-style: italic; 42 } 43 </pre> 44 <script> 45 /** 46 * 获取css样式 47 * ele 元素 48 * prop 属性名 49 **/ 50 function getStyle(ele, prop) { 51 if (window.getComputedStyle) { 52 return window.getComputedStyle(ele, null)[prop]; 53 } else { 54 return ele.currentStyle[prop]; 55 } 56 } 57 var el = document.getElementById('box'); 58 console.log('position：' + getStyle(el,'position')); // absolute 59 console.log('left：' + getStyle(el,'left')); // 488.5px 60 console.log('font-size：' + getStyle(el,'font-size')); // 32px 61 console.log('font-style：' + getStyle(el,'font-style')); // italic 62 console.log('max-width：' + getStyle(el,'max-width')); // none 63 console.log('bottom：' + getStyle(el,'bottom')); // 532px 64 </script> 65 </body> 66 67 </html>