《精通javascript》-----------------------读书笔记

《精通javascript》一书由jquery作者写成,其中不少对于js原生事件的处理正好是jquery使用的方法,为我看jquery源码提前做了一些准备。
第七章关于位置的处理方法,记录下来。以前一直是使用封装好的方法,很少去考虑兼容性,因为觉得这块兼容性实在是太差了。
1 样式的获取。普通样式:ele.style[name](name即为样式名称)。
     计算样式:ie:ele.currentStyle[name]
ff:document.defaultView.getComputedStyle(ele).getPropertyValue(name);//其中,它使用的是通用的text-align
   而不是textAlign,所以要进行处理:name = name.replace(/[A-Z]/g,'-$1').toLowerCase();
2 元素相对于整个文档位置。使用offsetLeft和offsetTop来计算,这里涉及到offsetParent,ff中其始终指向跟节点,opera中指向直接父亲。所以
做如下处理:
function getX(ele)
{
return  ele.offsetParent?ele.offsetLeft+getX(ele.offsetParent):ele.offsetLeft;
}
就是当其offsetParent不是根节点时,一直递归,最后把每一个offsetLeft加起来。
3 元素相对于父元素的位置。(好多人说用style.left就行了,那个值只是相对于css父级盒子的距离,这里需要直接父级元素的距离)
用上面的 getX(child) - getX(child.parentNode)即可。
4 设置位置,修改left和top的值是唯一的方法。
5 获取元素的大小:普通元素,用 1 里面获取样式的兼容方法获取 'height'和‘width’属性。对于display:none隐藏元素,先将其变为
 display:‘’;visbility:‘hidden’;然后用clientHeight实现。
6 透明度:ie:ele.style.filters = alpha(opacity='[1-100]');
 ff: ele.style.opacity = [0-1];
7 鼠标位置:ff : e.pageX 
   ie : window.event.clientX + document.body.scrollLeft
8 视口大小:document.body.clientHeight:不包含边框,只是记载内容高度 document.body.scrollHeight 也可以 
9 滚动条位置 self.pageXoffset||document.documentElement.scrollTop(ie)||document.body.scrollTop
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值