style.height、offsetHeight、clientHeight、scrollHeight的差别
style.height
包含元素的滚动栏,不包含边框
clientHeight
不包含元素的滚动栏和边框
offsetHeight
包含元素的滚动栏和边框
scrollHeight
offsetHeight+scrollTop
小贴士:
在IE下,创建一个oLi
<style>
li{/*不设置li的高度*/}
</style>
<script>
var oLi = document.createElement('li');
oLi.innerHTML='我是li的内容';
/*
在oLi还没有加入到父级之前,
IE的获取当前样式方法
getComputedStyle(oLi).height
仅仅能返回"auto"
而oLi.clientHeight能返回实际高度
*/
document.body.appendChild(oLi);
</script>
style.height、offsetHeight、clientHeight、scrollHeight的差别的更多相关文章
- 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 浅谈style.height、clientHeight、offsetHeight、scrollHeight
先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clie ...
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...
- [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- height、clientHeight、scrollHeight、offsetHeight区别
转自 http://www.cnblogs.com/yuteng/articles/1894578.html 我们来实现test中的onclick事件 function justAtest() ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
随机推荐
- 【hdu 1083】Courses
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=1083 [Description] 有p门的课,每门课都有若干学生,现在要为每个课程分配一名课代表, ...
- C# Aspect-Oriented Programming(AOP) 利用多种模式实现动态代理
什么是AOP(Aspect-Oriented Programming)? AOP允许开发者动态地修改静态的OO模型,构造出一个能够不断增长以满足新增需求的系统,就象现实世界中的对象会在其生命周期中不断 ...
- 洛谷—— P1162 填涂颜色
https://www.luogu.org/problem/show?pid=1162 题目描述 由数字0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字1构成,围圈时只走上下左右4个方向.现要求把闭 ...
- IntelliJ IDEA 2018 Community(社区版)创建J2EE项目+Tomcat9部署
博主打算开始系统地自学JAVA,首要问题就是解决IDE的问题, 以前用过像VS.Android Studio.Eclipse,知道Eclipse是JAVA最传统的IDE, 用过VS和AS的朋友都知道, ...
- HDU 3131 One…Two…Five! (暴力搜索)
题目链接:pid=3131">HDU 3131 One-Two-Five! (暴力搜索) 题意:给出一串数字,要求用加,减,乘,除(5/2=2)连接(计算无优先级:5+3*6=8*6= ...
- node中间层
node中间层 一.总结 1.node中间层作用:前端也是mvc,NodeJS之后,前端可以更加专注于视图层,而让更多的数据逻辑放在Node层处理 2.node中间层作用:当发现所有请求量太多应付不过 ...
- 使用node.js+babel,支持import/export语法
如果要在node里面支持import/export default语法步骤: 1.使用npm安装 babel的客户端工具 npm init 会生成package.json文件 2.接着安装bebel客 ...
- uiautomator_python使用汇总
1.判断按钮状态 if d(resourceId="id",enabled=False): #判断当前按钮是否为未激活状态,为True则为激活状态2.获取toast提示语 d.to ...
- TabControl里面添加From
private void dynamicDll() { string dllName = "dll"; Assembly ass = Assembly.Load(dllName); ...
- Log4j 2使用教程 分类: B1_JAVA 2014-07-01 12:26 314人阅读 评论(0) 收藏
转载自 Blog of 天外的星星: http://www.cnblogs.com/leo-lsw/p/log4j2tutorial.html Log4j 2的好处就不和大家说了,如果你搜了2,说明你 ...