关于获取元素的样式的兼容问题

在table不能遗露了tbody的最后测试图中，会发现虽然设置了table的一个高度，但经过浏览器渲染后的实际高度没有200px，因此，小小研究一下，记录如下

一、style

可以通过style来获取一个元素的内联样式，这个返回值就是你设置的值（颜色可以会变进制)

1. 可以返回组合式的样式，比如font,border,background等，

a), 但在处理颜色上稍微有一些变化，比如background = #000000 在 IE > 9和其他浏览器中会把它算成rgb然后返回来（rgb(0,0,0)),但 IE < 9中直接返回你所设置的#000000

b). 在输出顺序上有一定的变化，比如 border: 1px solid #000, 在IE > 9和其他浏览器中会输出

1px solid rgb(0, 0, 0）但在ie < 9中会输出 #000000 1px solid ，并且这个顺序是不会据你设置的顺序来改变的，是浏览器固定了的

2.假如你想获取一个在行间没设置的样式或者是一个非标准的样式，IE < 9 会返回一个undefined, 其他的浏览器会返回一个空字符串

二、currentStyle

这个是IE系获取计算后的样式值;语法如下

element.currentStyle[attr]

返回的的是一个只读的CSSStyleDeclaration对象，其中[ie6 => 110个， ie7,ie8 => 124个， ie9 => 201个， ie10 => 298个]个属性，包含各自的私有属性

1.不能获取组合式样式的值，在IE < 9 中返回undefined,在ie > 9 中返回空字符串

obj.currentStyle[‘font’] ==> ie < 9 ? undefined : ‘’

2. 对颜色的不进行进制转换的处理，#000000 ===> #000000，对百分比也不进行处理

3.对于浏览器支持的属性，但是没有设置相应的属性的（比如说 boxShadow), IE > 9 返回默认值比如（ 'none’, 'auto’)

obj.currentStyle[‘boxShadow’] ===> ie < 9 ? undefined : ‘none’

4.对于浏览器不支持的属性（比如说'fsy’）浏览器都会返回 undefined

三、getComputedStyle

这个是标准浏览器获(ie>9 和其他的)取样式值，

语法

   var style = window.getComputedStyle(element[, pseudoElt]);

   返回的是一个只读的CSSStyleDeclaration对象，其中[ie9 => 201, ie10 => 298, chrome29 => 258; opera16 => 267, safari5.17 => 233,  ff23.01 => 210]个属性，还有6个方法

  getPropertyCSSValue,getPropertyPriority,getPropertyValue,item,removeProperty,setProperty

1.常见的用法

   getComputedStyle(element,null)[attr]

   a).  这个用法不能获取组合属性

   b).  这个用法获取的是绝对值，会对百分比，小数点进行处理，(ie ff对绝对值是小数的不会进行取整，opera,chrome,safari会把小数向下取整，返回一个整数)不会对颜色进行处理

   c).  对于浏览器不支持的属性（比如自造的，浏览器私有属性）返回undefined

   d).  对于没有重写的属性，会返回浏览器默认值

   e). 最重要的区别是，这个属性对于table的处理

getComputedStyle#table{border:10px solid red;  100px;height: 100px;}
<table border="1"></table>

window.getComputedStyle('table',null)['height']

//ff  ie9 ie10  ===> 100px
//chrome, opera, safari ===> 80px

对于一个元素的HTML属性有border时，并重写了它的高（宽，不管是样式重写，还是HTML属性声明border），ff ie会把bordder计算在内，而chrome,opera,safari会把实际的border除掉 (原因，我觉得是对table的渲染机制不同）

PS1：关于getComputedStyle中的第二个参数问题

第二个参数可以是null,空字符串，也可以是' : before, : after, :first-line等伪类'

一、当一个元素本身就支持的伪类

1. 获取一个伪类元素的内容，比如

getComputedStyle#p: before{
   content:'fsy';
  }
<p id="p">some message</p>

a) ff,ie 会直接把content的内容不经过解析直接当字符串返回 ==> ""fsy"” 长度为5

b) chrome,safari,opera 会把content经过解析后的内容返回 ===> "fsy" 长度为3

c) 两者的类型都是string

2. 当一个元素支持的伪类设置了高与宽，但没将它设置成块级元素（行内块级）,获取它的高度

getComputedStyle#p:before{
   content: 'fsy'
    100px;
   height: 100px;
}
<p id="p">some message</p>

window.getComputedStyle('p',':before')['height']

a) ff,ie,safari会返回设置的值 ===> 100px

b) chrome,opera 返回属性的默认值 ===> auto

3. 当一个元素支持的属性，比如返回p: before的boxShadow，都会返回默认值 'none’

二、当一个元素本身不支持的伪类，也被强行设置了属性，比如

getComputedStyle#p:active {
  content: 'fsy';  100px;height: 100px;
}
<p id ="p">some message</p>
window.getComputedStyle('p',':active')['content']

1.获取它的content

ie ==> ‘normal’

ff ===> ‘none’

safari,ff,chrome ===> ‘’

总结：当获取一个元素伪类的content时，如果该元素不支持这个属性；ie ==> ‘normal’ ff ==> ‘none’ 其他的 ==> ''

2. 获取它的宽度全部===> ‘100px’

3. 获取它的boxShadow ===> ‘none’

4. 获取它不存在的属性 ‘fsy’ ===> undefined

三.目前就对a: [link | visited | focus | hover | acitve] : before : after支持度比较好 ,有的浏览器返回的仅仅是设置值，而不是计算值

ps2: 关于getComputedStyle几个方法的运用

1. getPropertyValue 返回一个元素的计算值,与currentStyle一样，但也有不同的

a) 这个方法在opera16,chrome29中获取组合属性，颜色也会转换成rgb模式，但在其他浏览器中还是不可以

===================================================================

注：以下内容摘自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

b) 可以获取CSS样式申明对象上的属性值（直接属性名称），例如：

     window.getComputedStyle(element, null).getPropertyValue("float");

如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

c) 使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");

2.getPropertyCSSValue

a) getPropertyCSSValue方法返回一个CSS最初值(CSSPrimitiveValue)对象(width, height, left, …)或CSS值列表(CSSValueList)对象(backgroundColor, fontSize, …)，这取决于style属性值的类型。在某些特别的style属性下，其返回的是自定义对象。该自定义对象继承于CSSValue对象（就是上面所说的getComputedStyle以及currentStyle返回对象）。

b) getPropertyCSSValue方法兼容性不好，IE9浏览器不支持，Opera浏览器也不支持（实际支持，只是老是抛出异常）。而且，虽然FireFox中，style对象支持getPropertyCSSValue方法，但总是返回null. 因此，目前来讲，getPropertyCSSValue方法可以先不闻不问。

=================完毕================================================

3. getPropertyPriority()

如果在规则中指定CSS特性"important"，则返回"important"；否则返回空字符串。

4. removeProperty(propertyName)

从CSS定义中删除propertyName。

5.item(index)

返回在给定索引index处的CSS特性的名称，例如"background-color"。

6. setProperty(propertyName,value,priority)

按照指定的优先级priority来设置CSS特性propertyName的value值（"important"或者为空字符串）。

四、window.getDefaultComputedStyle

文档： window.getDefaultComputedStyle