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 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- Linux中MySQL5.6编译安装与MySQL5.7二进制安装步骤
- Nginx服务编译安装、日志功能、状态模块及访问认证模式实操
- 快速入门系列--WebAPI--03框架你值得拥有
- 快速入门系列--MVC--06视图
- 腾讯入局物业管理 欲改造传统服务?
- ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
- ansible批量管理软件部署及剧本
- 快速入门系列--MVC--02路由
- Javascript生成GUID
- 快速入门系列--MVC--04模型
- 快速入门系列--MVC--03控制器和IOC应用
- ExtJs学习笔记(3)_GridPanel[XML做数据源]
- 快速入门系列--MVC--05行为
- Linux Rsync备份服务介绍及部署守护进程模式
- 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 数组属性和方法
- springmvc之SessionAttributes注解所引发的异常
- 【tensorflow2.0】处理文本数据-imdb数据
- springmvc之异常处理DefaultHandlerExceptionResolver
- springmvc之返回json类型的数据给前端
- springmvc之mvc:view-controller标签设置可以直接访问的视图
- exec族
- springmvc实例之添加雇员相关信息(二)
- Qt引入第三方库(亲测Qt4和Qt5)
- springmvc之与spring进行整合
- recv&send函数
- setsockopt与getsockopt
- django-模型之(ORM)对象关系映射(一)
- Mybatis学习笔记(二)Mapper的配置问题
- 服务端向客户端传输文件
- 【tensorflow2.0】处理时间序列数据