博主信息
何澤小生的博客
博文
70
粉丝
0
评论
0
访问量
55243
积分:1
P豆:324

clientWidth 和 getBoundingClientRect 区别

2018年08月21日 15:30:42阅读数:1729博客 / 何澤小生的博客/ 前段技术大集合
document.documentElement.clientWidth
document.documentElement.getBoundingClientRect().width;

两个方法获取宽度的区别:

getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。

此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。

当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);

例子如下:

<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
    <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
        height: 400px; width: 600px; border: solid 3px #f00;">
    </div>
</div>

<script>
    var divP = document.getElementById('divParent');
    var divD = document.getElementById('divDisplay');

    var clientWidth = divP.clientWidth;
    var getWidth = divP.getBoundingClientRect().width;
    divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
    divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</script>


全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • jsphp之间有有:1、php的字符串连接符是“.”
    vuereact相似:1、相似之处是他们都是JavaScript的UI框架,专注于创造前端的富应用;2、是react数据流单向,而vue数据双向绑定。
    springbootspringmvc的是springboot只是一个配置工具,整合工具,辅助工具,springmvc是框架,项目中实际运行的代码。
    centosredhat的是:1、版权问题不同,redhat的红帽图标是有版权的,CentOS被称为redhat的社版;2、服务不同,redhat是有相应的收费服务的,centos没有。
    Struts2SpringMVC的:1、SpringMVC开发效率性能高于Struts2;2、Struts2的配置文件量比SpringMVC大;3、Struts2更加符合OOP的编程思想;4、SpringMVC
    css中”:“”::“的:”:“表示伪类,”::“表示伪元素。
    nginx教程:本文为大家介绍了fastcgicgi有什么,具有一定的参考价值,希望可以帮助到大家。fastcgicgi的是:是否重复fork进程,处理请求。
    箭头函数普通函数
    GO语言中=:=的:=是赋值,:=是声明变量并赋值。本文通过实例为大家介绍了GO语言中=:=的,希望随大家有一定的帮助。
    PHPCMSPHP的:PHPCMS是一个完整开源的网站内容管理系统,而PHP是一种计算机编程语言,而PHPCMS是用PHP语言进行编写的,所以两者是完全不同的东西,也无法比较
    【git rebase 】【merge】的是:1、采用mergerebase后,git log的,merge命令不会保留merge的分支的commit;2、加了【rebase】就是以【rebase
    ​下面由thinkphp框架教程栏目给大家介绍ThinkPHP5下has_onebelongs_to的,希望对需要的朋友有所帮助!
    js中“==”“===”的是:1、“==”表示等同,“===”表示恒等;2、“==”只比较内容,“===”既比较内容也比较数据类型。
    Docker容器镜像的:镜像是由一层层只读层堆在一起组成的,而Docker容器是由镜像的只读层读写层组成的,两者的唯一是Docker容器的最上面的一层是可读可写的。
    YiiLaravel的:1、Yii在代码上面不会为了设计模式而过度设计,而Laravel有点设计过度;2、Laravel语法更富有表现力,并且每行代码都可以简洁、富于表达力;2、Laravel社比较活跃
    DockerMySQL:Docker是一个开源的应用容器引擎,可以让开发者打包应用到一个容器中,然后发布到任何流行的Linux机器上运行,而MySQL是一个关系型数据库管理系统。
    RHELCentOS:1、redhat是收费版,CentOS是免费版;2、redhat提供商业的解决方案 ,CentOS不提供;3、CentOS独有的yum命令支持在线升级,可以即时更新系统,而redhat
    cssdiv的:1、div标签可定义文档中的分或节,用于定义HTML文档中的一个分隔块或者一个域部分;2、CSS是一种用来表现HTML或XML等文件样式的计算机语言。
    :1、MBR最多支持4个主分;GUID最多支持128个主分,没有扩展分逻辑盘。2、MBR支持2.2T容量以下的硬盘分;GUID支持2.2T容量以上的硬盘分
    jquery prop()attr():1、【attr()】方法设置或返回被选元素的属性值;2、【prop()】方法设置或返回被选元素的属性值。