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 ...
随机推荐
- sql server向表里添加字段
ADD mcTypeE VARCHAR(20) NULL,mcGoodsE VARCHAR(20) NULL, mcTypeF VARCHAR(20) NULL,mcGoodsF VARCHAR(20 ...
- Android睡眠唤醒机制--Kernel态
一.简介 Android系统中定义了几种低功耗状态:earlysuspend.suspend.hibernation. 1) earlysuspend: 是一种低功耗的状态,某些设备可以选 ...
- 把java程序打包成.exe
准备工作:将可执行的jar包跟资源跟第三方包都放到一个目录下. 能够将jre包也放入里面.这样在没有安装jre的情况下也能够执行. watermark/2/text/aHR0cDovL2Jsb2cuY ...
- trunc与round
TRUNC(number[,num_digits]) number 需要截尾取整的数字. num_digits 用于指定取整精度的数字.Num_digits 的默认值为 0. 作用:截断数字和时间 ...
- Redis 性能測试
Redis 性能測试 Redis 性能測试是通过同一时候运行多个命令实现的. 语法 redis 性能測试的基本命令例如以下: redis-benchmark [option] [option valu ...
- lettuce--Advanced Redis client
redis官方提供的java client: git地址:https://github.com/mp911de/lettuceAdvanced Redis client for thread-safe ...
- element ui源码解析 -- input篇
el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...
- Nginx 虚拟主机及正向代理设置
添加虚拟主机 # vim /usr/local/nginx-1.9.0/conf/vhost/proxy.conf server { resolver 8.8.8.8; listen ; locat ...
- POS 60域用法
版权声明:本文为博主原创文章,未经博主允许不得转载. 自定义域(Reserved Private) 1.变量属性 N...17(LLLVAR),3个字节的长度值+最大17个字节的数字字符域. 压缩时用 ...
- Android内存优化杂谈
Android内存优化是我们性能优化工作中比较重要的一环,这里其实主要包括两方面的工作: 优化RAM,即降低运行时内存.这里的目的是防止程序发生OOM异常,以及降低程序由于内存过大被LMK机制杀死的概 ...