JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布(3)

var doc = node ? node.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;


优先获取documentElement的再选择body的,这样就基本能解决了。
但这个其实是不完善的,如果给文档添加如下样式:

body{height:300px;overflow:scroll;width:500px;}


在ie6/7会发现在标准模式下body的部分会按指定高度和宽度呈现,而且能带滚动条。
就是说documentElement和body能各自设置scrollTop。
那这个时候该获取哪个就说不清了,还好一般情况并不需要这样设置的(至少我是没碰过)。
对于这样的特例,知道有这个情况就行了,没必要为了它增加太多代码。
ps:获取的scrollLeft/scrollLeft是不会有负值的。

contains方法是判断参数1元素对象是否包含了参数2元素对象。
主要利用ie的contains和w3c的compareDocumentPosition来判断。
具体参考这里的比较文档位置部分

有两个元素坐标相关的方法:rect和clientRect。
其中rect是相对浏览器文档的位置,clientRect是相对浏览器视窗的位置。
当支持getBoundingClientRect时,利用它配合getScrollLeft/getScrollTop获取文档位置。
否则用循环获取offsetParent的offsetLeft/offsetTop的方式获取。
具体参考这里的比较元素位置部分

还有三个样式相关的方法:curStyle、getStyle、setStyle
curStyle是用来获取元素的最终样式表的,根据支持情况返回getComputedStyle(w3c)或currentStyle(ie)。
ps:这里要优先判断getComputedStyle,因为opera也支持currentStyle。

getStyle是用来获取元素指定样式属性的最终样式值的。
支持getComputedStyle的直接用它获取样式的computed value就行,关于computed value可以参考这里
而currentStyle虽然跟getComputedStyle有点像都是获取最终样式,但两者得到的值的形式是不同的。
它不像getComputedStyle那样返回渲染完成后准确的规格统一的值,而只是一个设置值。
而且这个值还不一定就是渲染后的准确值。
程序主要做的就是在ie中尽量获取接近getComputedStyle的值。

首先是处理透明度,ie虽然用的是滤镜但它的值除以100就跟w3c的"opacity"的值一样了: 

if (/alpha\(opacity=(.*)\)/i.test(style.filter)) {
    
var opacity = parseFloat(RegExp.$1);
    
return opacity ? opacity / 100 : 0;
}
return 1;


还有"float",这个比较简单换成"styleFloat"就行了。

获取样式后还有一个工作是转换单位。当判断得到的值是一个数值而单位又不是px的话,就会进行转换。
方法是参考jQuery的curCSS的,理解之前先认识两个比较少用的属性:runtimeStyle和pixelLeft。

runtimeStyle是ie特有的属性,用法跟style差不多,但它有着最高的优先级。
就是说如果在runtimeStyle设置了样式就会忽略掉style中同样的样式。
具体可以参考birdshome的“关于HTML Object中三个Style实例的区别”和“关于使用runtimeStyle属性问题讨论
而pixelLeft的作用是以像素px为单位返回元素的left样式值,ie(还能用在runtimeStyle)和opera支持。

知道这两个东西后,就能理解它的原理了:
1,先备份原来的值:

style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left;


2,设置runtimeStyle的left为currentStyle的left:

elem.runtimeStyle.left = elem.currentStyle.left;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjywds.html