10.8 如何用js验证一下boz-sizing样式对块级盒子大小的影响?
如何用js验证一下boz-sizing样式对块级盒子大小的影响?
可以用getClientRects方法,获取元素的边界矩形的矩形集合。
document.querySelector("#medium").getClientRects()[0].width
document.querySelector("#thick").getClientRects()[0].width
使用getBoundingClientRect验证
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合,就是该元素的 CSS 边框大小 。
1,如果是标准盒子模型,如果box-sizing: content-box,元素的尺寸等于width/height + padding + border-width的总和。
2,如果box-sizing: border-box,元素的的尺寸等于 width/height。
返回接口与上面的方法是一样的。
另外,使用clientWidth查看内部宽度
Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。
代码:
<h1>关于getBoundingClientRect验证示例1</h1>
<div id="x">Border Box</div>
<script>
var x = document.querySelector("#x");
console.log('getBoundingClientRect().width =', x.getBoundingClientRect().width);
console.log('getComputedStyle(x).width =', getComputedStyle(x).width);
</script>
<style>
#x {
border: 20px solid blue;
padding: 10px;
width: 140px;
box-sizing: border-box;
}
</style>
<h1>关于getBoundingClientRect验证示例2</h1>
<div id="x1">Border Box1</div>
<script>
var x1 = document.querySelector("#x1");
console.log('getBoundingClientRect().width =', x1.getBoundingClientRect().width);
console.log('getComputedStyle(x1).width =', getComputedStyle(x1).width);
</script>
<style>
#x1 {
border: 20px solid blue;
padding: 10px;
width: 80px;
box-sizing: content-box;
}
</style
输出:
虽然样式里宽度不同,但是输出的getBoundingClientRect().width相同。
当我们将width样式改为相同的值以后,输出便不同了。效果:
9月29日
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- 二分查找模版
- Hadoop数据分析平台实战——010hadoop介绍安装
- Python为什么文件运行和在命令行运行同样语句但结果却不同?
- HDU 2034 人见人爱A-B
- Hadoop数据分析平台实战——030Hadoop Shell命令02(熟悉linux跳过)离线数据分析平台实战——030Hadoop Shell命令02
- Hadoop数据分析平台实战——070深入理解MapReduce 02(案例)离线数据分析平台实战——070深入理解MapReduce 02
- Hadoop数据分析平台实战——040HDFS介绍(熟悉基础概念跳过)离线数据分析平台实战——040HDFS&JAVA API(熟悉基础概念跳过)
- Hadoop数据分析平台实战——060深入理解MapReduce 01(案例)离线数据分析平台实战——060深入理解MapReduce 01(案例)
- 利用向量积(叉积)计算三角形的面积和多边形的面积
- HDU 1556 Color the ball
- Hadoop数据分析平台实战——080HBase介绍和安装离线数据分析平台实战——080HBase介绍和安装
- Hadoop数据分析平台实战——130Hive Shell命令介绍 02(熟悉Hive略过)离线数据分析平台实战——130Hive Shell命令介绍 02(熟悉Hive略过)
- ECJTUACM16 Winter vacation training #4 题解&源码
- Hadoop数据分析平台实战——090HBase shell客户端和Java Api介绍离线数据分析平台实战——090HBase shell客户端和Java Api介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法