惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Apple Machine Learning Research
Apple Machine Learning Research
爱范儿
爱范儿
博客园_首页
博客园 - 【当耐特】
V
Visual Studio Blog
博客园 - 叶小钗
月光博客
月光博客
美团技术团队
J
Java Code Geeks
小众软件
小众软件
Y
Y Combinator Blog
博客园 - Franky
Martin Fowler
Martin Fowler
博客园 - 聂微东
Microsoft Azure Blog
Microsoft Azure Blog
IT之家
IT之家
MyScale Blog
MyScale Blog
人人都是产品经理
人人都是产品经理
Microsoft Security Blog
Microsoft Security Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
阮一峰的网络日志
阮一峰的网络日志
酷 壳 – CoolShell
酷 壳 – CoolShell
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
云风的 BLOG
云风的 BLOG

博客园 - 天雪

交换机的重要技术参数 JavaScript:prototype属性使用说明 编译器错误信息: CS0016 JavaScript应用:Iframe自适应其加载的内容高度 Web开发实用浏览器(工具)插件 什么是VML 经典足球 flash+xml结合应用实例下载 一个10岁小孩 网页屏蔽(左右键,代码等)的非JS方法 Asp.net Xml开发网络硬盘 CSS expression VS Script event Asp.net地址转义(分析)加强版--Dottext的地址分析模块的不足之处及相应的解决方案 MapBar中坐标的加密和解密(JS实现) Google Earth经典坐标 通过DOM操作数据(下) 通过DOM操作数据(上) DOM 精简知识教程 鼠标拖动层的JS方法
图解DOM中关于对象范围的属性。
天雪 · 2006-06-24 · via 博客园 - 天雪

图解DOM中关于对象范围的属性。

以Height为例,相关的属性有这些:
clientHeight:获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
offsetHeight:对象底与父对象的坐标的高度,会计算到上面clientHeight不计算的那些东东,所以大部分情况下,offsetHeight与clientHeight相等,也有不少情况比clientHeight多那么几px,大家可以用document.body做个测试。
如果对象超过容器的height,那么会出现scrollbar,那么我们就要考虑以下几个属性了:
scrollTop:对象的实际顶端(这个顶端可能已经不可见了)和容器顶端的值。
scrollHeight:对象全部展开的高度。(相当于你的身高,你量的时候应该是伸得最直了吧。)
如果有滚动的情况,那么,当滚动到最底的时候,clientHeight + scrollTop = scrollHeight;此处请使用clientHeight,而不是offsetHeight。
我们一般设对象的高度,会在HTML中写style="height:100px;",而偏偏obj.style.height和offsetHeight一样包涵边距、边框、滚动条或可能应用到该对象的补白,所以我们要一个对象全部展开,要这样写obj.style.height = obj.scrollHeight + ( obj.offsetHeight - obj.clientHeight ),你就直接写obj.style.height = obj.scrollHeight的话,有时空间还是不够的,就好像你身高1.70m,你的房子也只有1.70m的话,你要是穿个鞋什么你就进不去了,当然,如果你没穿鞋,你也可以进去。有时我们会要一个对象自适应高度,如弹出一个合适大小的窗口,你可以考虑这么做,resizeTo(1,1);再用上面写的那种语句,当然,你要引用的是body的那套属性。
对于宽、左、右,都一样。