JavaScript讀取元素的樣式style、getComputedStyle()、currentStyle
style方法
style物件代表一個單獨的樣式宣告，可以從應用樣式的文件元素訪問Style物件。style物件獲取的是內聯樣式獲，取不了外部的樣式，即這個方法只能JS只能獲取寫在html標籤中的寫在style屬性中的值（style=”…”），而無法獲取定義在<style type="text/css">裡面的屬性。
注意：currentStyle屬性和getComputedStyle屬性不能設定屬性,只能獲取！！！
getComputedStyle()方法
getComputedStyle()屬於window物件
document.defaultView.getComputedStyle(element[,pseudo-element]); （備註）defaultView：在許多線上的演示程式碼中, getComputedStyle 是通過 document.defaultView 物件來呼叫的。 大部分情況下，這是不需要的， 可以直接通過 window 物件呼叫。但有一種情況，你必需要使用 defaultView, 那是在 Firefox 3.6 上訪問子框架內的樣式 (iframe)。除了在 IE8 瀏覽器中 document.defaultView === window 返回的是 false 外， 其他的瀏覽器（包括 IE9 ）返回的都是 true。所以後面直接使用 window 就好，不用在輸入那麼長的程式碼了。 或者 window.getComputedStyle(element[,pseudo-element]);
getComputedStyle(元素，[偽類])第二個引數是可選的，通常會將其設為null；返回值為一個物件，包含該元素的所有樣式屬性。
getComputedStyle返回的物件是CSSStyleDeclaration型別的物件。取資料的時候可以直接按照屬性的取法去取資料，例如style.backgroundColor。需要注意的是，返回的物件的鍵名是css的駝峰式寫法，background-color -> backgroundColor。
注意：float 是 JS 的保留關鍵字。根據 DOM2 級的規範，取元素的 float 的時候應該使用 cssFloat。其實 chrome 和 Firefox 是支援 float 屬性的，也就是說可以直接使用。
相容性問題：在 Chrome 、Firefox 、IE 9+是支援該屬性的，IE 8並不支援該屬性。 IE 8 支援的element.currentStyle 屬性，這個屬性返回的值和getComputedStyle的返回基本一致，只是在 float 的支援上，IE 8 支援的是 styleFloat。
currentStyle方法
Element.currentStyle是一個與Window.getComputedStyle()方法功能相同的屬性。這個屬性實現在舊版本的IE瀏覽器中。語法：
element.currentStyle[相應元素名稱]; 或者 element.currentStyle.相應元素名稱;
瀏覽器獲取適相應配樣式方法
function styleDecide(obj,name) {
if (window.getComputedStyle){
//適配Chrome、火狐、IE9以上版本瀏覽器
return getComputedStyle(obj,null)[name];
} else {
//適配IE8瀏覽器
return obj.currentStyle[name];
}
}
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .ban{ color: aqua; font-size: 32px; background-color: #888888; border: none; width: 300px; height: 100px; text-align: center; margin: auto; } </style> <script type="text/javascript"> window.onload = function () { var but_submit = document.getElementById("but_submit"); var p_submit = document.getElementById("p_submit"); but_submit.onmouseover = function () { //document.write(but_submit.value); p_submit.innerHTML = but_submit.value; //but_submit.currentStyle.color; p_submit.style.color = styleDecide(but_submit,"color"); }; //瀏覽器獲取適配樣式 function styleDecide(obj,name) { if (window.getComputedStyle){ //適配Chrome、火狐、IE9以上版本瀏覽器 return getComputedStyle(obj,null)[name]; } else { //適配IE8瀏覽器 return obj.currentStyle[name]; } } }; </script> </head> <body> <input id="but_submit" class="ban" type="submit" value="登入"> <p id="p_submit"></p> </body> </html>