无忧技术网 - RSS订阅 
无忧技术网

Javascript 中几个定位属性的说明


作者:[佚名] - 发布:2010-10-28 13:37:44 - 来源:无忧技术网

HTML DOM Style 对象的定位属性见下表:

属性 描述 IE F O W3C
position 把元素放置在static, relative, absolute 或 fixed 的位置 4 1 9 Yes
top 设置元素的顶边缘距离父元素顶边缘的之上的距离 4 1 9 Yes
bottom 设置元素的底边缘距离父元素底边缘的之下的距离 5 1 9 Yes
left 设置元素的左边缘距离父元素左边缘的左边的距离 4 1 9 Yes
right 设置元素的右边缘距离父元素右边缘的右边的距离 5 1 9 Yes
zIndex 设置元素的堆叠次序 4 1 9 Yes

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中

描述
static 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

参考地址:http://www.w3school.com.cn/htmldom/dom_obj_style.asp#positioning

HTML DOM Element 对象的定位属性见下表:

属性 描述 类型 状态
offsetHeight, offsetWidth 返回元素的高度和宽度,以像素为单位。这是非标准的但却得到很好支持的属性。 int 只读
offsetLeft 返回当前元素的左边界到它的包含元素的左边界的偏移量,以像素为单位。 int 只读
offsetTop 返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。 int 只读
scrollHeight, scrollWidth 返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow 属性),这些属性和 offsetHeight 与 offsetWidth 不同,scrollHeight 和 scrollWidth 只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。 int 只读
scrollTop, scrollLeft 返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性。 int 只读

参考地址:http://www.w3school.com.cn/xmldom/dom_htmlelement.asp

责任编辑:liqwei
打印本页】【关闭本页】【返回列表
·上一篇:Javascript向量图Lib–Raphaël
·下一篇:JS中URL编码和解码函数详解
 文章评分
  • current rating
-5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5
 相关文章
·[协议规范]域名各种状态的说明 (2014-10-23)
·[JS/CSS/HTML]window.location.hash属性介绍 (2014-08-16)
·[JS/CSS/HTML]在 JavaScript 中如何为 Label 设置 for 属性? (2010-10-18)
·[JS/CSS/HTML]JavaScript[对象.属性]集锦 (2010-04-22)
 相关评论
 站点最新文章 更多>> 
·[经典影音]弱点
·[经典影音]萨利机长
·[经典影音]天空之眼
·[管理知识]康奈尔笔记法,提高100%学习效率
·[管理知识]刘强东:我管75000人靠这4张表格
·[管理知识]跟壳牌学HSE管理
·[运营策划]编辑工作内容整理
·[至理名言]奋斗与决定
·[瀚海拾遗]盲人打灯笼之各家论道
·[搞笑段子]中国男足
 站点浏览最多 更多>> 
·[协议规范]http断点续传原理:http头 Range、…
·[JS/CSS/HTML]HTML 空格的表示符号 nbsp / en…
·[NoSQL]Mongo数据库简介
·[协议规范]什么是SPF记录?如何设置、检测SP…
·[协议规范]图解 HTTPS 通信过程
·[PHP]精选国外免费PHP空间推荐
·[程序综合]常用IP地址查询接口
·[程序综合]什么是 DNS Prefetch ?
·[程序综合]获取客户端IP地址的三个HTTP请求…
·[Linux]/usr 目录的由来