源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript 精确获取样式属性(上)

  • 时间:2021-10-18 12:01 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript 精确获取样式属性(上)
JQuery,mootools,Ext等类库在这部分实现得非常艰辛,盘根错节地动用一大堆方法,因此想把这部分抠出来难度很大。深入研究它们的实现后,根据我积累的CSS知识,终于做出一个非常简炼的版本出来。它相当于JQuery.cssCur吧,不过或许功能还丰富一些,按饮食业话说叫“加量不加价”,我的可能还应叫“加量还减价”……版本还处于Beta阶段,由于只个工具函数就不弄成类了。
[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
发现在IE取得值太精确了,比火狐还准确,不过我也不打算在程序内部设置取精度的运算,因为我不确定现实中究竟会向上遍历多少次。在某一父元素的padding与width取精度,很可能会严重影响其最终值的精度。基本上,width与height与padding的取值就到此为止,我们再来看盒子模型的两个东西:margin与border。 margin的auto通常为0px,但在IE6下,当我们将其父元素的text-align设为center,它不但把文本居中,连块级元素本身也忧患中了,这是IE6居中布局的基石。很难说这是BUG,就像IE5的怪癖模式的盒子模型那样,很符合人通常的思维习惯,但是较难实现,加之W3C是偏袒被微软阴死的网景,于是网景的盒子模型成为标准了。IE6庞大的用户基础不容忽视,我们不能随便给0px了事。我也说了,auto有个对称性,因此好办,我们求出其父元素的width然后减于其offsetWidth再除以2就行了。因为offsetWidth是针对于offsertParent的,因此我们用时临时把其父元素的position设为relative,让子元素来得offsetWidth后,再将父元素的position还原。
[u]复制代码[/u] 代码如下:
//转换margin的auto if(/^(margin).+/.test(style) && value == "auto"){ var father = el.parentNode; if(/MSIE 6/.test(navigator.userAgent) && getStyle(father,"text-align") == "center"){ var fatherWidth = parseFloat(getStyle(father,"width")), _temp = getStyle(father,"position"); father.runtimeStyle.postion = "relative"; var offsetWidth = el.offsetWidth; father.runtimeStyle.postion = _temp; return (fatherWidth - offsetWidth)/2 + "px"; } return "0px"; }
borderWidth的默认值为medium,即使它为0px,但如果我们显式地设置其宽为medium呢?!它就不为0px了。这个比较恶心,我们需要判定这值是我们自己加上的还是浏览器的默认值。不过我们发现如果是默认的,其border-XX-style为none。另,除了medium外,还存在两个模糊值thin与thick。它们在浏览器的精确值见下表:
IE8 ,firefox等标准浏览器 IE4-7
thin 1px 2px
medium 3px 4px
thick 5px 6px
[u]复制代码[/u] 代码如下:
//转换border的thin medium thick if(/^(border).+(width)$/.test(style)){ var s = style.replace("width","style"), b = { thin:["1px","2px"], medium:["3px","4px"], thick:["5px","6px"] }; if(value == "medium" && getStyle(el,s) == "none"){ return "0px"; } return !!window.XDomainRequest ? b[value][0] : b[value][1]; }
再看top,left,right与bottom,想不到firefox,safari都会偷懒,会返回auto,只有opera老老实实地返回精确值。解决办法也很简单,因为微软一个好用的函数已被所有浏览器支持了。
[u]复制代码[/u] 代码如下:
//转换top|left|right|bottom的auto if(/(top|left|right|bottom)/.test(style) && value == "auto"){ return el.getBoundingClientRect()[style] }
嗯,文章已经很长很长,剩下的部分下次再讲。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部