手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2011年08月23日的文章

CSS border-top-width 属性

Submitted by gouki on 2011, August 23, 1:26 PM

看到这个CSS属性的时候，我真的纠结了半天，border-top-width，看这个词组的含义，我还以为是边框顶部的宽度，最初我以为是边框边的宽度，但看了手册后，才发现原来是BODER的高度，粗细之类的。

后来看到了这里的介绍：http://school.mzoe.com/css/pr_border-top_width.html，才小小的了解了一点：

定义

border-top-width 属性设置元素的上边框的宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

注释：请始终把 border-style 属性声明到 border-width 属性之前。元素只有在获得边框之后，才能改变其边框的宽度。

-------

同时也介绍了说这个值是可以通过JS来改变的。反正不管怎么样，我已经明白了

Javascript | 评论:0 | 阅读:13449

参考：getBoundingClientRect方法

Submitted by gouki on 2011, August 23, 11:13 AM

看到getBoundingClientRect方法，是用phpstorm进行跳转的，跳转到原始文件中，居然提示我是@browser IE，@return TextRange
一下子就闷了，还好有google，找到了一篇 文章（不好意思，不是专业做前端的，对于这些函数所以都不太了解，也没有去看什么 w3cschool之类的教程）
找到了这篇 文章才知道：

http://younglab.blog.51cto.com/416652/386540
  1. /** 
  2.  * 这原本是IE中获取页面中某个元素位置的方法 ，【相对于浏览器左上角】 
  3.  * FF在3.0中也提供这个方法，在3.5还能获取元素高度和宽度属性 
  4.  * IE中会比其他浏览器多出2个像素 
  5.  * return{left,top,right,bottom,width,height} 
  6.  */  

OK，我也不多介绍了，看一下原文中对于这一点是怎么解释的：

XML/HTML代码
  1. 页面左上角由一个元素，紧贴浏览器的左边和上边，在除IE外的浏览器，包括基于IE内核的搜狗浏览器（360垃圾浏览器及TT浏览器未测试）都能正确的获取到各个属性的值，而在IE中，每个值都会比正常值多出两个像素，例如，正常的left值为0，在IE中为2；  
  2.   
  3. 这是因为IE中document.documentElement.clientTop并不为0（尽管已设置html、body的margin和padding为0），所以在IE中获得的值要减去document.documentElement.clientTop的值。  

更多的资料还是去看原文吧：http://younglab.blog.51cto.com/416652/386540

Javascript | 评论:0 | 阅读:15128