JS部分

<div class="jb51code">
<pre class="brush:js;">
<script type = "text/javascript">
window.onload = function(){
var test = document.getElementById("test");
var tag = document.getElementById("tag");

//CSS样式对象:CSS2Properties{},CSSStyleDeclaration
console.log(test.style); //火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{} 
console.log(tag.style); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
//element.style<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>的是内嵌式的style，如果不是内嵌式，则是一个空对象

console.log(tag.style.backgroundColor);//pink
console.log(tag.style['background-color']);//pink
//<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>类似background-color,border-radius,padding-left类似样式的两种写法啊

console.log(test.currentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……}
console.log(window.getComputedStyle(test))
//<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

console.log(test.currentStyle.width);//500px(IE)
console.log(window.getComputedStyle(test).width); //500px;
console.log(window.getComputedStyle(test)['width']);//500px;
//document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]   

}