Javascript Dom元素信息
1.Dom元素的大小
| 属性 | 说明 | 调用者 |
|---|---|---|
| offsetWidth，offsetHeight | 返回元素的宽高(border+padding) ,整数 | 当前Dom元素 |
| clientWidth，clientHeight | 返回元素的宽高(padding) ,整数，不能是行内元素 | 当前Dom元素 |
| getBoundingClientRect().width | 返回元素的宽度(border+padding+width),精确到小数 | 当前Dom元素 |
| getBoundingClientRect().height | 返回元素的宽度(border+padding+height),精确到小数 | 当前Dom元素 |
| scrollWidth/scrollHeight | 这个属性只有当子元素大小超出父容器时才有意义。即：父元素被撑开的大小。 | 当前Dom元素 |
| getComputedStyle(element).width | 返回元素的宽度(不包含border+padding，带单位px) | window |
| getComputedStyle(element).hegiht | 返回元素的高度(不包含border+padding，带单位px) | window |
- 注意1：getComputedStyle(element)这个方法返回目标元素实际生效的样式对象，再通过属性名获取到具体的属性值（宽高带单位，可自行用parseInt()转换），行内元素返回 auto
- 注意2：元素的display不能为none，否则宽高为0
- 注意3：IE 8并不支持getComputedStyle这个特性。 IE 8 支持的是 element.currentStyle 这个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
#box{
width: 400px;
height: 200px;
padding: 10px;
border:2px solid red;
}
#big{
width: 600px;
height: 300px;
background-color: pink;
color: #fff;
text-align: center;
font-size: 50px;
line-height: 300px;
}
</style>
<body>
<div id="box">
<div id="big">较大的子元素600 * 300</div>
</div>
</body>
</html>
<script>
var box = document.querySelector('#box')
// 元素总大小
console.log(box.offsetWidth) // 424
console.log(box.offsetHeight) // 224
// 元素可见大小
console.log(box.clientWidth) // 420
console.log(box.clientHeight) // 220
// 元素内容区大小
console.log(getComputedStyle(box))//CSSStyleDeclaration{}
var width = getComputedStyle(box).width
var height = getComputedStyle(box).height
console.log(width,height) // 400px 200px
//下面的代码只能在IE8中运行
//alert(box.currentStyle.width)//400px
// 元素被撑开的大小（子元素的总大小）
console.log(box.scrollWidth) //610
console.log(box.scrollHeight) //310
</script>
当子元素的总大小小于父容器时：
2.Dom元素的位置信息
| 属性名 | 说明 | 调用者 |
|---|---|---|
| offsetLeft | 获取当前元素到父级定位元素左边的距离，注意，是父级定位元素(el.offsetParent)！！！ | 当前Dom元素 |
| offsetTop | 获取当前元素到父级定位元素顶部的距离，注意，是父级定位元素(el.offsetParent)！！！ | 当前Dom元素 |
| scrollLeft | 获取和设置当前元素被滚动条卷去的宽度 | 当前Dom元素 |
| scrollTop | 获取和设置当前元素被滚动条卷去的高度 | 当前Dom元素 |
注意：元素的display不能为none，否则距离为0
通过设置元素scrollLeft/scrollTop属性值的大小，可以让滚动条滚动到相应的位置。
注意：监听系统滚动条请使用window对象，设置系统滚动条要使用document.documentElement元素
<script>
var box = document.querySelector('#box')
// 让box元素回到顶部
box.scrollTop = 0
// 让box元素回到最左边
box.scrollLeft = 0
//系统滚动条
window.onscroll = function (ev) {
//操作系统的滚动条要使用document.documentElement元素
console.log(document.documentElement.scrollTop)
}
//系统滚动条回到顶部
document.documentElement.scrollTop = 0
</script>
3.获取屏幕大小
| 对象 | 说明 | 备注 |
|---|---|---|
| window.screen.width | 返回当前屏幕的宽度（设备独立像素） | 值是静态的，大小取决于屏幕 |
| window.screen.height | 返回当前屏幕的高度（设备独立像素） | 值是静态的，大小取决于屏幕 |
| document.documentElement.clientWidth | 返回当前页面根标签(html标签)的宽度 | 值取决于当前浏览器的窗口大小，会受浏览器的窗口缩放，工具栏之类的影响 |
| document.documentElement.clientHeight | 返回当前页面根标签(html标签)的高度 | 值取决于当前浏览器的窗口大小，会受浏览器的窗口缩放，工具栏之类的影响 |
<script>
var screen_width = window.screen.width
var screen_height = window.screen.height
document.write('当前屏幕宽高为'+screen_width+'*' + screen_height)
var html_width = document.documentElement.clientWidth
var html_height = document.documentElement.clientHeight
document.write('<br />'+'当前html标签宽高为'+html_width+'*' + html_height)
</script>
pc端表现1：14寸笔记本-浏览器全屏
当前屏幕宽高为1366*768
当前html标签宽高为1366*625
pc端表现2：14寸笔记本-浏览器窗口化（screen系列不受影响，而html元素变小）
当前屏幕宽高为1366*768
当前html标签宽高为767*604
移动端未设置viewport时（iphone6s plus）
当前屏幕宽高为414*736
当前html标签宽高为980*1472
移动端设置完美视口：浏览器工具栏会占据一部分空间，所以 html.clientHeight < screen.height
<meta name="viewport" content="initial-scale=1.0">
当前屏幕宽高为414*736
当前html标签宽高为414*622
Javascript Dom元素信息的更多相关文章
- JavaScript DOM 元素属性 状态属性
JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...
- JavaScript DOM–元素操作
获取元素 根据 ID 获取元素 语法: document.getElementById(id) <div id='time'>2020-01-09</div> <scri ...
- 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- JavaScript DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- JavaScript DOM实战：创建和克隆元素
DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- 点击空白处隐藏指定dom元素（纯javascript方法）
<script type="text/javascript"> document.onclick = function (event) { event = event ...
随机推荐
- HDLC报文简单分析
最近在学习HDLC协议,从刚开始的一窍不通到现在的懵懵懂懂,下面分享一段报文解析,给初学者一点点经验的分析. 报文:7E A0 57 03 02 B8 4B 5B E6 E7 00 C4 01 C1 ...
- [34]（CSP 集训）CSP-S 联训模拟 1
A 几何 重复若干次 -> 不能重叠,因此考虑直接暴力 DP 设 \(f_{i,j,k}\) 表示主串匹配到第 \(i\) 位(将前 \(i\) 位分别归为两类),其中 \(x\) 在重复了若干 ...
- KPTI——可以缓解“熔断” (Meltdown) 漏洞的内核新特性
Linux 内核修复办法:内核页表隔离KPTl(kernel page table isolation) 每个进程一张页表变成两张:运行在内核态和运行在用户态时分别使用各自分离的页表 Kernel页表 ...
- 61.null和undefined的区别
null 是空指针,用来保存准备使用的对象,但是现在还没有,用来占位 : undefined 是未定义,是声明了变量但是没有初始化 :
- find命令，查找文件
find 是 Linux 中强大的搜索命令,不仅可以按照文件名搜索文件,还可以按照权限.大小.时间.inode 号等来搜索文件. [root@localhost ~]#find 搜索路径 [选项] 搜 ...
- 揭秘！KubeSphere 背后的“超级大脑”：etcd 的魅力与力量
作者:尹珉,KubeSphere Ambassador & Contributor,KubeSphere 社区用户委员会杭州站站长. 1. 开篇:揭开神秘面纱,etcd 如何驱动 KubeSp ...
- 5.29 相约杭州！云原生 Meetup 第二期杭州站开启报名
以容器技术和容器编排为基础的云原生应用,被越来越多的企业用户接受和使用,并且在生产环境中使用容器技术的比例逐年增加.KubeSphere 作为一款面向应用的开源容器混合云,经过 3 年的发展和 10 ...
- C语言之常量
常量 常量,常量表达式和const关键字修饰的只读变量都存储在.rodata只读数据段中 1.字面值常量 literal 整形字面值 123, 0xff00ff 字符常量,类型总是 int, 'a', ...
- MD5文件的计算
Windows下的命令 certutil -hashfile <文件名> <hash类型> 如: certutil -hashfile "C:\1.txt" ...
- Windows 11安装跳过联网
方案1 在选择WIFI联网的界面,不要连接网络. Shift + F10(或者Fn+Shift+F10),打开cmd窗口,输入命令:oobe\BypassNRO.cmd 重启后会有一个我没有互联网的选 ...