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. 【Codeforces Round #452 (Div. 2) B】Months and Years

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 闰,平,平 平,闰,平 平,平,闰 平,平,平 4种情况都考虑到就好. 可能有重复的情况. 但是没关系啦. [代码] #includ ...

  2. 4.Windows下安装ZooKeeper

    转自:https://www.cnblogs.com/mstmdev/p/5612791.html 官方主页: https://zookeeper.apache.org/     选择合适的镜像地址下 ...

  3. ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第一篇:准备工作

    摘要      本文将简要介绍这个文章系列的目的.形式及大体内容.并且完成开始学习这个系列前所必要的准备工作. 前言      ASP.NET MVC作为微软官方的MVC解决方案,推出有一段时间了.可 ...

  4. GO语言学习(十九)Go 错误处理

    Go 错误处理 Go 语言通过内置的错误接口提供了非常简单的错误处理机制. error类型是一个接口类型,这是它的定义: type error interface { Error() string } ...

  5. JS学习笔记 - 普通选项卡(面向过程)

    疑问: 1. getElementsByTagName 和 getElementsByClassName  的区别? 分别在什么应用场景?    <!DOCTYPE html> <h ...

  6. JS里的map与forEach遍历

    map 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. var numbers = [3,2,6,3] function func(num){ return num * documen ...

  7. (转) 25个必须记住的SSH命令

    转自:http://www.cnblogs.com/weafer/archive/2011/06/10/2077852.html OpenSSH是SSH连接工具的免费版本.telnet,rlogin和 ...

  8. (转)xshell无法在vim中复制黏贴

    ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴 修改.vimrc set mouse=c vi的三种模式:命令模式,插入模式,可视模式.鼠标可以启动于各种模式中: The ...

  9. docker 第一课 —— 从容器到 docker

    1. 容器的概念 一种虚拟化的解决方案 与虚拟机所不同的是,虚拟机通过中间层,将一台或多台独立的机器虚拟运行于物理硬件之上: 而容器是直接运行于操作系统内核之上的用户空间: 基于上述,容器虚拟化也被称 ...

  10. [Debug] Use Snippets to Store Behaviors in Chrome DevTools

    Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your ...