javascript 盒子模型
oDiv.clientWidth---》width+左右padding
oDiv.clientHeight---》height+上下padding
oDiv.clientTop---》上边框的高度
oDiv.clientLeft---》左边框的宽度
oDiv.offsetWidth---》clientWidth+左右边框的宽度
oDiv.offsetHeight---》clientHeight+上下边框的高度
offsetLeft---》当前元素距离父级参照物的左偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
offsetTop---》 当前元素距离父级参照物的上偏移量(从最外面的边框开始算,也就是得到的值不包含我们的边框的宽度)
console.log(oDiv.scrollWidth);
console.log(oDiv.scrollHeight);
1)在没有内容溢出的情况下:
和我们的clientWidth/clientHeight值相等
2)在有内容溢出的情况下:
不管是否隐藏了溢出的内容(overflow: hidden),我们的计算是这样处理的:
scrollWidth 约等于 实际内容的真实宽度(被内容撑开后的宽度)+左padding
scrollHeight 约等于 实际内容的真实高(被内容撑开后的高度)+上padding
console.log(document.documentElement.scrollHeight||document.body.scrollHeight);
在真实项目中我们通常用scrollHeight获取当前HTML页面的总高度(不管有几屏的内容我们都算上)
document.documentElement.clientHeight||document.body.clientHeight
只获取当前浏览器一屏的高度
先写document.documentElement在写document.body,这样就可以完全的兼容了
摘自“珠峰培训"
javascript 盒子模型的更多相关文章
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- css知多少(7)——盒子模型
1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- DIV + CSS 盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...
- CSS布局(一) 盒子模型
一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
随机推荐
- HDU 4996 Revenge of LIS(DP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4996 题意:求1到n的全排列中,有多少个排列的最长上升子列长度为K? 思路:对于当前的最长上升子列,我 ...
- Cheatsheet: 2014 05.01 ~ 05.31
Web Choosing a Web Framework/Language Combo for the Next Decade Optimizing NGINX and PHP-fpm for hig ...
- QUEEN_BLADE_2D-非常屌-113P
http://www.cgvoo.com/thread-33670-1-2.html http://blog.sina.com.cn/s/blog_4b92d6070102e7gj.html http ...
- 通过EasyUI Tree说明SQL GUID和自增列ID的使用场景
最新在开发中用到了EasyUI里面的Tree,通过API可以看到这个Tree的数据格式如下: 其中ID比较重要,API也说了,最开始我考虑到GUID比自增ID多占用了一些空间,所以采用的自增ID,测试 ...
- 【网络流24题----03】Air Raid最小路径覆盖
Air Raid Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- C++学习网站
1. CPLUSPLUS 2. CPROGRAMMING
- ASP.NET 2.0 异步页面原理浅析 [1]
与 ASP.NET 1.0 相比,ASP.NET 2.0 的各方面改进可以说是非常巨大的.但就其实现层面来说,最大的增强莫过于提供了对异步页面的支持.通过此机制,编写良好的页面可以将数据库.WebSe ...
- mysql5.1版本 my.cnf中复制的配置不起作用
原因是:在mysql存放数据的目录下面有一个文件master.info,mysql服务器认为 master.info比my.cnf优先级要高,第一次启动slave,master.info不存在,从my ...
- python仿微软记事本
# -*- coding=utf-8 -*- from tkinter import filedialog import tkinter as tk import tkinter.scrolledte ...
- 对于syncedmen类的代码分析
对于数据在cpu与GPU之间同步的问题,caffe中用syncedMemory这个类来解 决:在GPU模式下,并且使用CUDA时,可以用CaffeMallocHost函数与CaffeFreeHost函 ...