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 ...
随机推荐
- Spark MLlib LDA 源代码解析
1.Spark MLlib LDA源代码解析 http://blog.csdn.net/sunbow0 Spark MLlib LDA 应该算是比較难理解的,当中涉及到大量的概率与统计的相关知识,并且 ...
- iptables转发安卓手机热点的数据到指定的端口
iptables转发安卓手机热点的数据到指定的端口 手机安装了VPN,可以上GOOGLE的那种.然后我打开手机的热点,连上笔记本,想让本本上个google 没想到被GFW挡住了.看了一下手机的网络工作 ...
- 1.1 Introduction中 Topics and Logs官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Topics and Logs 话题和日志 (Topic和Log) Let's fi ...
- IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以
IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.
- nuxt配置sass
没有比这更简单的了 只需要安装 node-sass sass-loader 就可以了 npm i node-sass sass-loader -D 然后就可以直接使用了: <style lang ...
- 【前端图表】echarts散点图鼠标划过散点显示信息
在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...
- 下次自己主动登录(记住password)功能
1:进入cookie插件 <script src="jquery.cookie.js" type="text/javascript"></sc ...
- python3 打印九九乘法表
打印九九乘法表 # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan for i in range(1, 10): fo ...
- GO语言学习(十一)Go 语言循环语句
Go 语言提供了以下几种类型循环处理语句: 循环类型 描述 for 循环 重复执行语句块 循环嵌套 在 for 循环中嵌套一个或多个 for 循环 语法 Go语言的For循环有3中形式,只有其中的一种 ...
- 【Codeforces Round #431 (Div. 1) B】
[链接]h在这里写链接 [题意] 场上有 n 个点,它们分别向上与向右在不同时刻开始运动,相遇则改变移动方向,求最终这些点到达的坐标. [题解] 先把每个点的坐标都往它本该移动的方向相反的方向退ti个 ...