javascript 盒子模型
2015-07-20 23:13
453 查看
oDiv.clientWidth---》width+左右padding
oDiv.clientHeight---》height+上下padding
oDiv.clientTop---》上边框的高度
oDiv.clientLeft---》左边框的宽度
oDiv.offsetWidth---》clientWidth+左右边框的宽度
oDiv.offsetHeight---》clientHeight+上下边框的高度
offsetLeft---》当前元素距离父级参照物的左偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
offsetTop---》 当前元素距离父级参照物的上偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
console.log(oDiv.scrollWidth);
console.log(oDiv.scrollHeight);
1)在没有内容溢出的情况下:
和我们的clientWidth/clientHeight值相等
2)在有内容溢出的情况下:
不管是否隐藏了溢出的内容(overflow: hidden),我们的计算是这样处理的:
scrollWidth 约等于 实际内容的真实宽度(被内容撑开后的宽度)+左padding
scrollHeight 约等于 实际内容的真实高(被内容撑开后的高度)+上padding
console.log(document.documentElement.scrollHeight||document.body.scrollHeight);
在真实项目中我们通常用scrollHeight获取当前HTML页面的总高度(不管有几屏的内容我们都算上)
document.documentElement.clientHeight||document.body.clientHeight
只获取当前浏览器一屏的高度
先写document.documentElement在写document.body,这样就可以完全的兼容了
摘自“珠峰培训"
oDiv.clientHeight---》height+上下padding
oDiv.clientTop---》上边框的高度
oDiv.clientLeft---》左边框的宽度
oDiv.offsetWidth---》clientWidth+左右边框的宽度
oDiv.offsetHeight---》clientHeight+上下边框的高度
offsetLeft---》当前元素距离父级参照物的左偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
offsetTop---》 当前元素距离父级参照物的上偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
console.log(oDiv.scrollWidth);
console.log(oDiv.scrollHeight);
1)在没有内容溢出的情况下:
和我们的clientWidth/clientHeight值相等
2)在有内容溢出的情况下:
不管是否隐藏了溢出的内容(overflow: hidden),我们的计算是这样处理的:
scrollWidth 约等于 实际内容的真实宽度(被内容撑开后的宽度)+左padding
scrollHeight 约等于 实际内容的真实高(被内容撑开后的高度)+上padding
console.log(document.documentElement.scrollHeight||document.body.scrollHeight);
在真实项目中我们通常用scrollHeight获取当前HTML页面的总高度(不管有几屏的内容我们都算上)
document.documentElement.clientHeight||document.body.clientHeight
只获取当前浏览器一屏的高度
先写document.documentElement在写document.body,这样就可以完全的兼容了
摘自“珠峰培训"
相关文章推荐
- jstack(查看线程)、jmap(查看内存)和jstat(性能分析)命令
- js JSON对象属性
- Zepto.js源码分析
- IDF-CTF-简单的js加密 writeup
- 2015.7.20 第九课 课程重点(js语句:获取时间、数字取值、定时器)
- JSP/SERVLET入门教程--Servlet 使用入门
- JS检查浏览器类型和版本
- JS检查浏览器类型和版本
- JS检查浏览器类型和版本
- 存储过程和输出分辨率表菜单JSON格式字符串
- JavaScript中对时间的操作
- 计入学习总结javascript事件
- arcgis JavaScript调用GP服务自动生成等值面
- 调用GP服务
- 打开jsp页面出现error解决办法
- javascript中英文字符长度判断
- javascript 常用验证
- js动画2 多物体运动
- JS
- 简单一招实现json数据可视化