JS获当前网页元素高度offsetHeight
本文测试的是offsetHeight，获取网页中某元素的高度，单位是像素，获取的类型是整型，可以进行数字运算。
如图，网页中的元素本身的高度包括，自身的内容+padding+border,而margin是元素对外面的距离，所以不属于元素本身的高度。
如图，设置一个div，取名叫D1，D1的上下左右padding各50px，上下左右margin各11px;上下左右border各10px;
最后的结果是：
offsetTop:11px，也就是margin的top值。进入浏览器的开发者模式，个人用的是qq浏览器极速模式，发现div在设置的顶边距包括了body的margin。
offsetLeft：19px，该div的左边margin设置的是11px，进入浏览器的开发者模式，可以看到body也有margin,是8px，所以该div距离浏览器左边的距离是body的margin+div自身的margin=8px+11px=19px。
offsetWidth：因为div本身不设宽度，所以是宽度自适应，随着浏览器窗口的大小而改变。内容宽度1150px+上下padding50px+50px+上下border10px+10px=1270px。
offsetHeight:div本身的上下border+上下pddding+div里内容本身的高度，由于本身没给div设置高度样式，所以高度和内容有关，目前里面是一句话，内容高度为42px。
10px+10px(上下border)+50px+50px(上下paddding)+42px（内容本身高度）=162px。
在IE中也测试了下，不同的是height，因为不同浏览器的默认字体默认字体大小等不同等，导致内容高度不同，因此offsetHeight也不同。
也就是offsetTop,offsetLeft是元素距离浏览器的边距，和元素本身的margin和外面的其他的margin有关。
offsetWidth、offsetHeight是元素本身的border、padding、内容的合计值，也就是整个元素本身的宽高。
测试代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
<style>#D1{background-color:#bbf1f2;padding:50px;margin:11px;border:10px solid blue;}</style>
</head>
<body>
<div id="D1">官网样例是混合部署<br>LodopFuncs.js里已经写好了判断</div>
<a href="javascript:prn1_preview()">点击获取</a><br>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview(){
var D1=document.getElementById("D1");
console.log("D1的上下左右padding各50px，上下左右margin各11px;上下左右border各10px;");
console.log("D1的上下左右：top:"+D1.offsetTop+",left:"+D1.offsetLeft+",width:"+D1.offsetWidth+",height:"+D1.offsetHeight);
};
</script>
</body>
图示：
JS获当前网页元素高度offsetHeight的更多相关文章
- js 获取浏览器/网页宽度高度整理
网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...
- js监听某个元素高度变化来改变父级iframe的高度
最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...
- js jq 获取网页元素宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- js控制两个元素高度保持一致
<script type="text/javascript"> $(function(){ if($("#left").height() > ...
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- 使用原生JS定位网页元素
约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw&qu ...
- 网页移动到一个高度后加载网页元素【getBoundingClientRect好用】
$(window).scroll(function () { var windowH = $(window).height();//取可视窗口的高度 ).getBoundingClientRect() ...
- js 元素高度宽度整理
1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...
- JS获取屏幕高度
主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下. 要 得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在netscape下需要使用w ...
随机推荐
- ElementUI入门和NodeJS环境搭建
1. ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它 ...
- NoSql数据库使用半年后在设计上面的一些心得 （转载）
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- Spring入门（二）——DI
1. DI Dependency Injection,依赖注入.当对象里有属性或对象的时候,就需要为这些属性或对象赋值 2. 流程 这里介绍两种方式 set方法 注解方式 2.1 set方法 Bean ...
- TPS与QPS，以及GMV
TPS是指每秒处理事务的个数,处理的载体可以是单台服务器,也可以是一个服务器集群. 例如:下单接口,一秒内,下单完成次数为1000,则下单接口总 tps = 1000,共有10台服务器提供下单服务,单 ...
- UOJ46 【清华集训2014】玄学 【时间线段树】
题目链接:UOJ 这题的时间线段树非常的妙. 对时间建立线段树,修改的时候在后面加,每当填满一个节点之后就合并进它的父亲. 对于一个节点维护序列,发现这是一个分段函数,合并就是归并排序.于是就形成了差 ...
- 《挑战30天C++入门极限》图文例解C++类的多重继承与虚拟继承
图文例解C++类的多重继承与虚拟继承 在过去的学习中,我们始终接触的单个类的继承,但是在现实生活中,一些新事物往往会拥有两个或者两个以上事物的属性,为了解决这个问题,C++引入了多重继承的概念 ...
- JSP了解点基础
了解即可: 1.JSP本质: 是将jsp文件解析为java servlet类! 生成.class文件 存放在工程的work文件夹内! 2.注释 <%-- --%> html ...
- P1041 传染病控制——暴力遍历所有相同深度的节点
P1041 传染病控制 说实话这种暴力我还是头一次见,每次病毒都会往下传染一层: 数据范围小,我们可以直接枚举当前层保护谁就好了: 用vector 记录相同层数的节点:维护已经断了的点: 如果超出最底 ...
- [树链剖分]BZOJ3589动态树
题目描述 别忘了这是一棵动态树, 每时每刻都是动态的. 小明要求你在这棵树上维护两种事件 事件0: 这棵树长出了一些果子, 即某个子树中的每个节点都会长出K个果子. 事件1: 小明希望你求出几条树枝上 ...
- LeetCode 第 159 场周赛
一. 缀点成线(LeetCode-5230) 1.1 题目描述 1.2 解题思路 比较简单的一题,利用公式 y = kx + b,确定好k和b就好,并且要考虑一种情况,函数 x = h. 1.3 解题 ...