元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect
1、示例代码
(1)html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js获取宽度</title>
<style type="text/css">
#app{
width: 300px !important;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="app" style="width: 200px;">
1
</div>
<script type="text/javascript">
let app = document.getElementById('app')
//不准确 只能获取内敛样式属性值
console.log(app.style.width)
//currentStyle:该属性只兼容IE(从IE6就开始兼容了),不兼容火狐和谷歌
// console.log(app.currentStyle.width)
// getComputedStyle仅仅ie 6 7 8不支持
console.log(window.getComputedStyle(app).width)
// 返回300 单位是px。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的
console.log(app.getBoundingClientRect().width)
</script>
</body>
</html>
(2)css
#app{
width: 100px;
}
2、方法区别
(1)dom.style.width
只能获取内敛样式。因此是不准确的。
(2)dom.currentStyle.width
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/currentStyle
Element.currentStyle
是一个与 window.getComputedStyle
方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。
(3)window.getComputedStyle(dom).width
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
Window.getComputedStyle()
方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。因此输出的值是准确的。
但是有兼容性:
https://caniuse.com/#search=getComputedStyle
ie6-8不支持。
(4)dom.getBoundingClientRect().width
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects()
方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
低版本的IE也有兼容性问题:
https://caniuse.com/#search=getBoundingClientRect
有的浏览器不包含width和height属性。
元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect的更多相关文章
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- js 元素高度宽度整理
1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...
- 浅谈style.,currentStyle,getComputedStyle,getAttribute
xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- style currentStyle getComputedStyle的区别和用法
先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样 ...
- js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别
<script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- javascript获取style兼容性问题
获取css 样式的方法有三种 : style, currentStyle , getComputedStyle style (无兼容性问题) 获取语法: ele.style.attr : 设置语法:e ...
- CSS父元素高度随子元素高度变化而变化
<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...
随机推荐
- git 删除远程分支和本地分支
删除远程分支和本地分支 https://www.cnblogs.com/luosongchao/p/3408365.html 将远程git仓库里的指定分支拉取到本地(本地不存在的分支) https:/ ...
- POI Excel 合并数据相同的行
import java.io.Serializable; /** * POI Excel报表导出,列合并实体<br> * * @author WQ * */ public class Po ...
- Logstash中如何处理到ElasticSearch的数据映射
Logstash作为一个数据处理管道,提供了丰富的插件,能够从不同数据源获取用户数据,进行处理后发送给各种各样的后台.这中间,最关键的就是要对数据的类型就行定义或映射. 本文讨论的 ELK 版本为 5 ...
- 联想昭阳(Lenovo)
1996年,联想®昭阳系列推出了第一台笔记本电脑S5100.在经历了十几年的发展之后,联想昭阳系列也成为了国内市场占有率最高的国产商用笔记本品牌之一.昭阳品牌对于联想意义非凡,不仅仅是因为首款联想笔记 ...
- GridControl常见用法【转】
刚接触DevExpress第三方控件,把GridControl的常见用法整理一下,以供参考: 说明: gcTest GridControl gvText GridView //隐藏最上面的G ...
- 如何解决在Windows Server 2008 R2 上安装证书服务重启后出现 CertificationAuthority 91错误事件
很久都没写什么博客了,前一段时间学习2008 R2时,在自己的电脑上同时安装AD 和证书 往往会出现一个CertificationAuthority错误,如下: 产生问题的主要原因是: 证书服务器与D ...
- 仿qq底部的提示标记
看到一个比較不错的开源项目,分享给大家: <?xml version="1.0" encoding="utf-8"?> <RelativeLa ...
- 【Spark】SparkStreaming-Kafka-集成-终极参考资料
SparkStreaming-Kafka-集成-终极参考资料 Spark Streaming和Kafka整合开发指南(二) – 过往记忆 Streamingkafka零丢失 | 等英博客 spark- ...
- [Docker] Hooking a Volume to Node.js Source Code
Normally when you create a Volume, it will store in Docket Host, you can also tell the folder which ...
- clearfix 兼容IE6/IE7,解决ie6/ie7下多出一行的问题,bootstrap的clearfix的bug
.clearfix:before, .clearfix:after { content: "."; display: block; height: ; overflow: hidd ...