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 ...
随机推荐
- mySQL函数根据经纬度计算两点距离 复制代码
http://www.cnblogs.com/lujiulong/p/6185041.html https://my.oschina.net/u/2273085/blog/505172?p={{pag ...
- Leetcode:populating_next_right_pointers_in_each_node题解
一. 题目 对于结构体:struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } ...
- OR1200指令Cache使用举例
下面内容摘自<步步惊芯--软核处理器内部设计分析>一书 12.4 ICache中的特殊寄存器 通过ICache的接口可知其具有特殊寄存器,而且是不可读的特殊寄存器,OR1200处理器中IC ...
- Flume Interceptors官网剖析(博主推荐)
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...
- java 文件读写--转载
读文件 http://www.baeldung.com/java-read-file Java – Read from File 1. Overview In this tutorial we’ll ...
- ajax对服务端发送请求
//兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else req = ...
- FMS2015:NVMe SSD的高可靠性及数据保护
FMS2015是一个充满技术干货的平台,各领域技术大拿在峰会上分享的技术和产品都影响甚至主导着闪存下一阶段的发展. 此次Memblaze的project师团队也是从存储系统.PCIe SSD以及闪存控 ...
- JAVA开发类似冒险岛的游戏Part1
JAVA开发类似冒险岛的游戏Part1 一.总结 二.JAVA开发类似冒险岛的游戏Part1 初学嘛) ,不过总的来说这个程序还是很有意思的.这里我重新再整理了一下,希望能帮助到其他想要开发类似程序的 ...
- 写给自己的TypeScript 入门小纲
前几日,在知乎上写了一些技术类的文章,有人私信问我,是不是要找一份工作,有没有想过要跳槽,然后我回到,你们公司都是用的什么框架什么技术,他罗列了一堆,其中就包含了TypeScript,我甚至不知道有这 ...
- MySQL字符编码问题,Incorrect string value
MySQL上插入汉字时报错例如以下.详细见后面分析. Incorrect string value: '\xD0\xC2\xC8A\xBEW' for column 'ctnr' at row 1 M ...