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的差别的更多相关文章

  1. 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

    测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 浅谈style.height、clientHeight、offsetHeight、scrollHeight

    先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clie ...

  3. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  4. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  5. offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...

  6. [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

    由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...

  7. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  8. height、clientHeight、scrollHeight、offsetHeight区别

    转自 http://www.cnblogs.com/yuteng/articles/1894578.html 我们来实现test中的onclick事件    function justAtest()  ...

  9. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

随机推荐

  1. [CSS] Build a Fluid Loading Animation in CSS

    In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS ...

  2. curl 使用 ~/.netrc ( Windows 上是 _netrc ) 问题

    curl 使用  --netrc-file <filemame> , -n, --netrc, --netrc-optional 等选项做登录认证时, 默认文件位于 ~/.netrc ( ...

  3. Flume Interceptors官网剖析(博主推荐)

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  4. C#中数组与ArrayList的简单使用

    1. 多维数组 2. 锯齿数组 3. 数组的常用操作 4. ArrayList 1. 多维数组 多维数组:行数和列数在定义时已确定 string[,] arr = new string[2, 3]; ...

  5. PatentTips - Use of multiple virtual machine monitors to handle privileged events

    BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...

  6. 三星Galaxy Tab S2上市,压制苹果之心凸显

        平板市场正在迎来史上最为关键的一次PK,众所周知,平板市场的苹果和三星一直是行业的领头羊,而在激烈的竞争中.三星平板似乎后劲更足.众多性能优异的产品频频推出.平板之王的称谓呼之欲出. 去年三星 ...

  7. !!在JS中代表什么

    !!一般用来将后面的表达式转换为布尔型的数据(boolean), javascript约定和c类似,规则为 ·false.undefinded.null.0."" 为 false, ...

  8. 关于PyYAML报错问题解决

    转自:http://www.fwqtg.net/%E5%85%B3%E4%BA%8Epyyaml%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86% ...

  9. js课程 5-14 js如何实现控制动画角色走动

    js课程 5-14 js如何实现控制动画角色走动 一.总结 一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...

  10. Hadoop笔记(一)

    1.大数据的概述 大数据:巨量数据.海量数据,首先在数据的量上达到一定的规模,首先是人或者计算机在不合理时间内是不能够实现的数据量. 2.特点:数据量比较大,数据类型多样化.处理速度问题 3.大数据平 ...