第十八课：js样式操作需要注意的问题

样式分为，外部样式（<link />），内部样式（<style></style>），行内样式（style:）。再加上一个important对选择器权重的干扰。

大体上，我们可以在标准浏览器上使用getComputedStyle，IE6-IE8下使用currentStyle来获取精确的样式。不过getComputedStyle不是元素上的方法，而是window的一个方法，它返回一个对象，这个对象可以调用getPropertyValue方法传入css标准风格的样式名获得其值。但是也可以使用属性+驼峰的风格去取值。我们可以写一个兼容的方法：

var getStyle = function(elem, name){   //传入元素，以及要查找的css属性的名字

　　name = name.replace(/\-(\w)/g,function(all,letter){　

　　　　　　　　return letter.toUpperCase();　

　　　　　　}) ;

　　//把css属性的名字改成驼峰形式的。all为匹配的子串，letter为子表达式匹配的子串，假设是margin-left，那么all为-l，letter为l，那么返回L，替换-l，就变成了marginLeft。这里需要改进，一些属性无法处理，比如：float,css3下的私有属性浏览器会有差异等。

　　if(window.getComputedStyle){

　　　　return window.getComputedStyle(elem,null)[name];   //第二个参数是处理伪类的，IE9不支持伪类的处理，因此这里要处理伪类的话，就会出错

　　}

　　else{

　　　　return elem.currentStyle[name];

　　}

}

接下来说一下需要注意的一些问题：

在标准浏览器下，如果元素节点没有插入DOM树，除了IE9-10，火狐，可以通过以上正常方法访问到内联样式外，其他的浏览器需要我们手动去找，可以通过$.contains方法。

在旧版本IE下，通过currentStyle取到的长，宽，如果有单位（比如：em,pc，pt），就很麻烦，它们不会自动进行单位换算。

float是js中的一个关键字，不能直接使用，就跟我在jQuery源码解析中说过的eval一样（http://www.cnblogs.com/chaojidan/p/4154310.html），IE这边用styleFloat，W3C用cssFloat代替。

CSS3中私有的前缀，IE：-ms-，Firefox：-moz-，Chrome：-webkit-，Safari：-webkit-，Opera：-o-。2013年初，谷歌嫌webkit内核太臃肿，决定单干，开发了blink，并在chrome28开始使用该内核，但是为了减轻用户负担，还是使用-webkit-做前缀。目前，使用-webkit-做前缀的有Opera，Safari，Chrome。

IE的前缀转换成js，前面的m是不大写的，而其他的浏览器会大写。举个例子：-ms-transform转换成js属性，就是msTransform，而-moz-transform，-webkit-transform转换成MozTransform，WebkitTransform。

透明度的设置：标准浏览器，包括IE9以及以上，设置透明度div{ opacity:0.5} (0-1之间的数，0不透明，1全透明)。opacity会同时让背景和内容透明，如果想让内容不透明，可以使用alpha。（比如：rgba，hsla）。IE6-8的透明度设置div{ filter:alpha(opacity=40)  }（0-100的数，相当于标准浏览器的0-1,0不透明，100全透明）。对于IE6-7，为了让透明设置生效，元素必须是拥有布局的(使一个元素拥有布局，很简单，设置元素的width，position，zoom=1等)，判断一个元素是否拥有布局很简单，只要elem.style.hasLayout为true,就证明有布局。在IE7-8下，如果透明度为100，也就是全透明，会让文本模糊不清，不能设置100.

css3有一个叫user-select的样式，用于控制文本内容的可选择性。标准浏览器可以很方便的设置元素的这个样式，但是旧版本IE，没有这样的样式，必须使用unselectable属性代替。不过由于unselectable不具有继承性，加之子元素是位于父元素的上面，因此设置一个元素可选，要把它的所有子孙都设置才行。

background-position，背景图片的位置，比如：background-position:center;在js中取这个样式，backgroundPosition。IE6-7下没有这个属性，只有backgroundPositionX，backgroundPositionY，不过合起来就是backgroundPosition了。

z-index只能工作在被明确定义了absolute，fixed，relative这三个定位属性的元素中，它会让元素沿着z轴进行排序（z轴的起点为其父节点所在的层，终点为屏幕）。如果为正数，则离用户更近，为负数则离用户更远。举个例子：一个相对定位的父节点，然后里面有N个绝对定位的子元素，如果没有指定z-index，它们的显示方式按照出现的先后顺序排列，如果有z-index，就按照z-index的值排列，如果是负数，子元素就排在父节点的背后。但是有一些bug存在，比如IE6下的select元素，z-index为负数时，浏览器的差异化处理等。当我们获取一个元素的z-index值时，如果目标元素没有被定位，就往上回溯其祖先定位元素，找到，就返回定位祖先的z-index值，没找到，就返回0（IE返回0，其他标准浏览器返回auto）。如果元素定位了，就会去获取此元素的z-index，如果z-index不存在就返回0（IE返回0，其他标准浏览器返回auto），如果z-index的值不是数字（无效值），比如是"aaa"这种字符串，就会返回auto（所有的浏览器）。