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,这样就可以完全的兼容了

 

摘自“珠峰培训"

转载于:https://www.cnblogs.com/zjx2011/p/4663056.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html自定义列表 嵌套,HTML 列表

HTML 支持有序、无序和定义列表:HTML 列表有序列表The first list itemThe second list itemThe third list item无序列表List itemList itemList item在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML无序列表无序列表是一个…

shiro会话监听_SpringBoot集成Shiro会话管理

在Shiro中我们可以通过org.apache.shiro.session.mgt.eis.SessionDAO对象的getActiveSessions()方法方便的获取到当前所有有效的Session对象。通过这些Session对象,我们可以实现一些比较有趣的功能,比如查看当前系统的在线人数,查看这些在线用…

JAVA程序员面试必知32个知识点

第一,谈谈final, finally, finalize的区别。 final 用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖,类不可继承。finally是异常处理语句结构的一部分,表示总是执行。finalize是 Object类的一个方法…

html 将两个标签绑在一起,基本标签2

表格的合并1.水平方向上的单元格合并可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)例如:含义: 把当前单元格当做两个单元格来看待注意点:1.由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格…

【原创】吟端午

《吟端午》人间六月艳阳天,粽子飘香不等闲。自古离骚东流水,九州沧海变桑田。创作时间:2016年06月08日创作背景:受人之约,赋诗为题!转载于:https://blog.51cto.com/yanhuasanyue/1842346

libc 无法访问null_C中strlen的NULL参数

1. C语言strlen函数参数如果是NULL,则会出错。可以参考glibc中strlen的具体实现通常使用前可以判断一下参数是否是NULL,或者自己写一个strlen的实现函数。2. String LengthYou can get the length of a string using the strlen function.This function …

dom对象常用的属性和方法有哪些?

dom对象常用的属性和方法有哪些? 一、总结 一句话总结: 1、document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2、element的属性和方法:属性比如style,innerHTML和…

html左中右自适应布局,CSS左中右自适应布局六种方案与原理

css虽简单,但细节多,技巧性高,易学难精。如何实现左右固定300px , 中间宽度自适应?有如下结构左右中公有样式, 设置高,设置左右宽度固定300px,左右为红色,中间为黄色。.item {height: 400px;}.left,.right {width: 300px;background: #f00;}.center {bac…

cacti 忘记密码的方法

忘记密码的方法如果是admin 的密码丢失,id 1;其他用户以此类推。进入mysqlmysql> show databases; mysql> use cacti;mysql> show tables; mysql> update user_auth set passwordmd5("newpassword") where id1;新的cacti密码就是…

cr3格式是什么意思_佳能rp的cr3如何打开?修图为什么要用raw格式?转码又是什么?...

佳能rp的cr3如何打开?修图为什么要用raw格式?转码又是什么?这是我个人整理的广大网友的一些答案,不想浪费大家太多时间就在这里分享给大家希望大家可以快速理解。(搜集的广大网友的回答,方便大家理解,希望他…

SGU traffic light

占位置。。转载于:https://www.cnblogs.com/usedrosee/p/4669358.html

计算机基础应用的培养活动记录,计算机应用基础综合实训

摘要:《计算机应用基础综合实训(Windows7Office 2010 第3版)》是中等职业教育课程改革国家规划新教材,根据教育部2009年颁布的"中等职业学校计算机应用基础教学大纲"中职业模块的要求编写,在第2版的基础上修订而成,经全国中等职业教育教材审定委员会审定通…

cronschedulebuilder 到时还没运行完_为什么我的软件编译时没问题,运行时却出错?...

首先有件事要和大家说一下:我的公众号现在可以留言了!出于种种不可抗力的原因(你们懂的),2018 年 3 月 12 号之后注册的公众号将不带有留言功能,并且前三个月内注册但并未使用的公众号的留言功能也会被一并…

Canvas createImageData

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。 对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值: R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-25…

青岛计算机类职业中学,青岛最好的职业学校有哪些?

青岛海洋职业学校是一所由青岛市教育局批准,国家承认学历的重点中等职业学校。学校占地200余亩,建筑面积5万平方米,在籍学生3975人。学校拥有雄厚的师资力量,以专职教师为主,是一支政治素质好,师德水平高、…

测试1

2018/06/03 测试我的随笔转载于:https://www.cnblogs.com/xixirui/p/9129252.html

使用Javascript正则表达式来格式化XML内容

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><meta http-equivcontent-type content"text/html; charsetUTF-8"><title>Xml格式化…

mysql vfp_vfp+mysql问题|交流区 - 梅子Visual FoxPro 编程 - Powered by phpwind

感谢楼上,请现场指导,拜谢c_pzwhfiellist""c_pzwhbglist""For i1 To Fcount()-1c_pzwhfiellistc_pzwhfiellistField(i)","c_pzwhbglistc_pzwhbglistField(i)Space(1)"pzwhk."Field(i)","Chr(10)Endforc_pzwhfiellistc_pzwhf…

Nginx 笔记与总结(3)配置虚拟主机

Nginx 重启的另外一种方式&#xff0c;相当于 kill -HUP cat /usr/local/nginx/logs/nginx.pid&#xff1a; /usr/local/nginx/sbin/nginx -s reload停止 Nginx 的另外一种方式&#xff1a; /usr/local/nginx/sbin/nginx -s stop重读日志文件的另一种方式&#xff0c;相当于 …

计算机如何查找目标,如何使用命令行查找计算机地理位置? | MOS86

有多种方法可以从IP地址中了解计算机的位置&#xff0c;但如果您决定使用命令行查找信息&#xff0c;那么您如何处理&#xff1f;今天今天的问题Screenshot由Paul Fenwick(Flickr)提供。问题SuperUser阅读器AlikElzin-kilaka想知道如何找到一台电脑首先&#xff0c;AlikElzin-k…