html js div 内容高度,JavaScript获取div高度并实现高度监听
#demo {
width: 100px;
height: 200px;
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
var div = document.getElementById('demo');
console.log(div.offsetHeight); // 224
console.log(div.clientHeight); // 220
可以看出
offsetHeight = height + padding * 2 + border * 2
clientHeight = height +padding * 2
可以看出来offsetHeight包括元素的内容+内边距+边框,而clientHeight的值等于元素的内容+内边框。
那我们怎么获取元素的本身高度呢?
1.直接利用style?
但是console.log(div.style.height) // ''
打印出来为空,这是因为style属性只能通过元素标签style属性里面的值来获取。
这里的div什么都没有,style也没有,当然输出为空了。
#demo {
width: 100px;
/*height: 200px;*/
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
要是把内部样式表中的height注释掉,将高度添加到style中,
console.log(div.style.height) // 200px
这样就能完美的获取到高度了。
显然这样每次都添加到内联样式是不理想的,那有没有更好的办法呢?
2.getComputedStyle
getComputedStyle()方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把八辈祖宗
给显示出来)
这样就不用麻烦的再去添加内联样式了。
另外,getConputedStyle是只读的,但是style是可读可写的,搭配他俩就可以动态设置元素高度。
只需要一行代码
window.getComputedStyle(div);
就可以获得一大堆属性值。
但是只想要某个属性值的话怎么办?让getPropertyValue(可以获得CSS样式申明对象的属性值)来帮忙。
console.log(window.getComputedStyle().getProperttValue('height')); //200px
成功获取元素高度。
怎么获取元素属性值的变化呢
ResizeObserver 允许我们观察DOM元素的内容矩形大小(宽度、高度)的变化,并做出相应的响应。它就像给元素添加 document.onresize() 或 window.resize() 事件(但在JavaScript中,只有 window 才有 resize 事件)。当元素改变大小而不调整视窗大小时,它是有用的。 下面描述一些调整观察者的行为:
当观察到的元素被插入或从DOM中删除时,观察将会触发
当观察到的元素 display 值为 none 时,观察都会触发
观察不会对未替换的内联元素(non-replaced inline element)触发
观察不会由CSS的 transform 触发
如果元素有显示,而且元素大小不是 0,0 ,观察将会触发
使用Resize Observe,只需要实例化一个新的ResizeObserve对象并传入一个回调函数,该函数接收观察到的条目
const myObserver = new ResizeObserver(entries => {
// 遍历条目,做一些事情
});
然后我们在实例化对象上调用observe并传入一个元素来观察
const someEl = document.querySelector('.some-element');
const someOtherEl = document.querySelector('.some-other-element');
myObserver.observe(someEl);
myObserver.observe(someOtherEl);
对于每个entry,我们都会得到一个包含contentRect和一个target属性的对象。
target是DOM元素本身,contentRect是具有以下属性的对象:width,height,
x,y,top,right,bottom和left。
contentRectde width和height值不包括padding。contentRect.top是元素顶部的padding
contentRect.left是元素左侧padding
比如要打印出被监听元素寸尺变化时width和height的值,可以像下面这样做:
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log('width', entry.contentRect.width);
console.log('height', entry.contentRect.height);
});
});
const someEl = document.querySelector('.some-element');
myObserver.observe(someEl);
html js div 内容高度,JavaScript获取div高度并实现高度监听相关推荐
- 使用普通JavaScript获取div高度
本文翻译自:Get div height with plain JavaScript Any ideas on how to get a div's height without using jQue ...
- js在div中追加html,JS把内容动态插入到DIV的实现方法
/p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Testing example.js 文件内容: window. ...
- Javascript获取div真实高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- Javascript 获取div真实高度
第一种情况就是宽高都写在样式表里. 比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- html 获取页面元素高度,浅谈JavaScript获取元素的大小(高度和宽度)的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
- JavaScript获取屏幕可视区域的高度
开发工具与关键技术:DW/浏览器 : JavaScript. 作者:刘佳明 撰写时间:2019年 2 月 17 日 本篇为大家简单阐述编程使如何让页面的窗口高度随着屏幕可视的高度变化而变化: 该方法不 ...
- python获取div标签的id_Python 获取div标签中的文字实例
预备知识点 compile 函数 compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 search() 这两个函数使用. 语法格式为: re. ...
- ios 获取nav高度_ios 获取导航栏和状态栏高度,针对iPhoneX
因为iPhoneX的产生,原本的导航栏再也不是44了,那么会出现什么问题呢?在隐藏导航栏的页面,原本的高度要向上调整一个导航栏+状态栏的高度.那么iPhoneX的导航栏高度不是44了,我们需要手动获取 ...
- 内容提供者ContentProvider, 读写加联系人,读写通话记录,监听收到的短信,获取之前已经收到的短信
1.什么是内容提供者? 首先我们必须要明白的是ContentProvider(内容提供者)是android中的四大组件之一,但是在一般的开发中,可能使用比较少.ContentProvider为不同的软 ...
最新文章
- 跟着老司机玩转Node自定义命令行
- Tableau必知必会之妙用Fixed函数聚合分析维度
- Mac解决终端显示乱码
- 【Linux网络编程】广播
- 过期时间_2020年最新航空里程过期时间及避免过期方法总结
- arm-linux-gcc /lib/libc.so.6,链接器 – 找不到/lib/libc.so.6
- 关于kinect的一些想法
- 2432功率计使用说明_Quarq功率计的安装、使用和维护
- Android应用程序开发以及背后的设计思想深度剖析(1)
- 如何制作一个计算机病毒,怎样制作一个简单的电脑病毒
- SpringBoot2.x 集成 腾讯云短信
- HDU 3954 Level up 2011 Alibaba Programming Contest 线段树
- 简体-繁体互转换的一个JS
- Dapper大规模分布式系统问题跟踪系统
- 华为云 鲲鹏ARM云服务器 和 x86云服务器 性能评测对比
- el-tree实现类似windows文件列表,并支持折叠、展开和重命名
- 【RC延迟电路 RC充电电路】 multisim 14.0仿真 参数计算
- linux下故障硬盘点灯操作
- word中选择单倍行距,但是有些段落的行距还是不一样
- android图片定位软件免费下载,地图定位大师 经纬度