第十八课: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(所有的浏览器)。

原文地址:https://www.cnblogs.com/chaojidan/p/4157729.html