獲取元素的css屬性值 · js技術點

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判斷瀏覽器是否支持一個方法</title> <style type="text/css"> pre { font-size: 16px; font-weight: 700; position: absolute; left: 10px; } </style> </head> <body> <pre id="pre"> window.getComputedStyle(element, null).left; // 獲取element的left樣式，谷歌火狐支持。 window.getComputedStyle(element, null)["left"]; element.currentStyle.left; // IE支持 element.currentStyle["left"]; </pre> <script type="text/javascript"> function getStyle(element, attr) { // 判斷瀏覽器是否支持這個方法 if(window.getComputedStyle) { console.log("瀏覽器支持window.getComputedStyle函數"); return window.getComputedStyle(element, null)[attr]; }else { console.log("瀏覽器支持element.currentStyle函數"); return element.currentStyle[attr]; } } window.onload = function() { var pre = document.getElementById("pre"); var left = getStyle(pre, "left"); console.log("left="+left); } </script> </body> </html> ``` 使用`element.style.left`只能獲取元素的行內式的樣式屬性，但是使用`window.getComputedStyle(element, null).left`、 `element.currentStyle.left`無論是行內樣式，內聯樣式、或者是外部css文件的樣式都可以獲取。