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. CMake编译Makefile

    以编译Libtif文件为例: 你可以用CMake编译libtiff,超简单,两个步骤. 参考文章 CharlesSimonyi,libtiff库的问题的答复

  2. 手把手教你用NDK9编译ffmpeg2.4.2

    编译环境: 32位 ubuntu12.10 android-ndk-r9c-linux-x86.tar.bz2 ffmpeg-2.4.2.tar.bz2 网上的教程都是以低版本号ffmpeg编译居多. ...

  3. x264代码剖析(三):主函数main()、解析函数parse()与编码函数encode()

    x264代码剖析(三):主函数main().解析函数parse()与编码函数encode() x264的入口函数为main().main()函数首先调用parse()解析输入的參数,然后调用encod ...

  4. Android学习笔记之网络接口(Http接口,Apache接口,Android接口)

    目前Android平台有三种网络接口可以使用,他们分别是:Java.NET.*(标准Java接口),org.apache(Apache接口),和android.Net.*(android网络接口). ...

  5. web前端背景介绍

    Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs等等: 基本 ...

  6. PythonNET网络编程3

    IO IO input output 在内存中存在数据交换的操作都可以认为是IO操作 和终端交互 : input print 和磁盘交互 : read write 和网络交互 : recv send ...

  7. 洛谷 P2069 松鼠吃果子

    P2069 松鼠吃果子 题目描述 有N个一种松鼠喜欢吃的果子由下向上串排成一列,并标号1,2,...N.一只松鼠从最下果子开始向上跳,并且第i次跳可以一次跳过i*i*i除以5的余数+1个果子(=i*i ...

  8. loadrunne-- Analysis 分析器

    本文转自:https://www.cnblogs.com/Chilam007/p/6445165.html Analysis简介 分析器就是对测试结果数据进行分析的组件,它是LR三大组件之一,保存着大 ...

  9. jmeter--响应断言

    背景 在测试过程中,我们需要对某个请求的结果进行判定. 比如我们搜索“你好”,请求发送成功,返回响应码也是200,但是并不能说明返回的响应就是对的,我们可能还需要判定响应结果包含“你好”.这个时候,我 ...

  10. stm32单片机时钟中断的配置

    原作者:http://www.eeworld.com.cn/mcu/article_2016082828940.html 配置流程:   1:系统时钟初始化,包括系统时钟和要开放的IO口或者功能的时钟 ...