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

在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的处理

#table{border:10px solid red; width: 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.  获取一个伪类元素的内容，比如

#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. 当一个元素支持的伪类设置了高与宽，但没将它设置成块级元素（行内块级）,获取它的高度

  

#p:before{
   content: 'fsy'
   width: 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’

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

#p:active {
  content: 'fsy'; width: 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