前端中 width 的获取
这篇文章其实是在了解 viewport 的过程中发现这些概念容易混淆做了个小小的总结。viewport的首要关键是宽度的获取,宽度的计算有下面几个属性和方法:
- clientWidth
- offsetWidth
- innerWidth
- scrollWidth
- getBoundingClientRect().width
Element.clientWidth
非行内元素的内部宽度(inner width of an element),包括 padding,不包括 margin 和 border。行内元素获取的值一直是 0,值为整数,小数四舍五入(round the value to an integer),属性为只读。
HTMLElement.offsetWidth
获取元素外围宽度(layout width of an element),包括 padding,border 以及滚动条,不包括 margin。同样是整数以及只读。
注:这里可以看到一个是 Element 的属性,一个是 HTMLElement 的属性,HTMLElement 继承于 Element,Element 不仅包括 html 元素,还有其他像 XML 之类的能在网页上展示的元素。可见 clientWidth 应用范围更广,这里暂时不作区别。
Window.innerWidth
innerWidth 属于 window 对象,包括了 window, frame, frameset, secondary window(二级窗口,这个不知道是啥),和元素无关,获取的是 window 的宽度,包括了滚动条,属性只读。
Window.outerWidth
获取的是浏览器外部宽度,这个对于页面渲染来说意义不大。包括了所有的浏览器元素,例如标题栏之类的。在 iphone 6sp 上测试值为0。screen.width 和这个值结果类似,在 iphone 6sp上正常。
Element.scrollWidth
当元素内部内容没有超出时,和 clientWidth 类似,获取的是元素的内容宽度,包括 padding。当内容(包括所有子元素,不过)溢出时,会把溢出内容的宽度计算进去,就算设置的 overflow 为 hidden,不过溢出内容需要是有效内容,display 为 none 或者没有内容只设置了宽度的元素是不会计算入内的。
Element.getBoundingClientRect()
这个方法不是专门返回元素宽度的,返回的是一个 DOMRect 对象:
{
bottom:-75
height:160
left:88
right:248
top:-235
width:160
x:88
y:-235
}
除了 winth 和 height 外,其他值相对于 viewport。宽高计算类似 offsetWidth,包括 padding,border,不包括 margin。MDN 上说 Empty border-boxes are completely ignored. 不过不知道什么是 Empty border-boxes,测试出来的结果都是不为0 的,行内元素也能够获取宽度。x,y,left,right 的值是相对于 viewport 获取的,即页面滚动时会有所影响。
getBoundingClientRect() 的计算会更常用于轮播等一些js组件中,因为他的结果不是整数,有小数结果,更加准确。
兼容性:
1、IE8 及更低没有返回 width 和 height。
2、IE 和 Edge 返回的内容不包括 x 和 y 属性。
本文来源:JuFoFu
本文地址:http://www.cnblogs.com/JuFoFu/p/7719679.html
水平有限,错误欢迎指正,转载请注明出处。
前端中 width 的获取的更多相关文章
- javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- 说说移动前端中 viewport (视口)
转载网络资源的文章:来源不详~~ 移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设 ...
- 移动前端中viewport(视口) 转
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...
- 使用jquery中height()方法获取各种高度大全
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...
- 多个iframe中根据src获取特定iframe并执行操作
多个iframe中根据src获取特定iframe并执行操作 前言:在项目中做一个批量编辑工单时需要在一大堆的iframe中的某一个iframe里边再用模态框的形式显示编辑区域,然后再在模态框里边加入i ...
- vue+element-ui中的图片获取与上传
vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...
- ios中摄像头/相册获取图片压缩图片上传服务器方法总结
本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下. 这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...
- C#开发微信门户及应用(14)-在微信菜单中采用重定向获取用户数据
我曾经在系列文章中的<C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍>中介绍了微信菜单里面的重定向操作,通过这个重定向操作,我们可以获取一个code值,然后获取用户的open ...
- asp.net三层架构 及其中使用泛型获取实体数据介绍
asp.net中使用泛型获取实体数据可以发挥更高的效率,代码简洁方便,本例采用三层架构.首先在model层中定义StuInfo实体,然后在 DAL层的SQLHelper数据操作类中定义list< ...
随机推荐
- WordCount 基础功能
软测第一次作业 该项目在码云上的地址: https://gitee.com/zhege/WordCount 一,概述 WordCount的基础功能需求分析大致如下:对程序设计语言源文件统计字符数.单词 ...
- 生成器 yield, next ,send
重要的yield :相当于一个断层,我们再用next取拿出每一层重要的next :生成器查看装置,查看每一个断层重要的send :和next一样查看每一个段层,不过在查看第二个断层的时候,就可以对前面 ...
- ES6常用片段
promise: --在return里面: methods:{ getSellData(){ return axios.get('/api/seller').then((res=>{ retur ...
- 孤荷凌寒自学python第四天 安装python的其它IDE环境
孤荷凌寒自学python第四天 安装python的其它IDE环境 (完整学习过程屏幕记录视频地址在文末) 因为是完全的新手,对python环境搭建完全一无所知,因此,可真是大费周章才配置了其它多个Id ...
- 数据结构与算法之顺序表C语言实现
顺序表等相关概念请自行查阅资料,这里主要是实现. 注: 1.顺序表C语言实现: 2.按较简单的方式实现,主要帮助理解,可在此基础上修改,更加完善: 3.提供几个简单函数,可自行添加功能: 4.可用C+ ...
- hnust 好友互动标识
问题 A: 好友互动标识 时间限制: 1 Sec 内存限制: 128 MB提交: 897 解决: 122[提交][状态][讨论版] 题目描述 QQ有一个有趣的功能即显示好友互动标识,它 ...
- nyoj 题目737 合并石子(一)
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的 ...
- VB.NET概述
简介 Visual Basic .NET属Basic系语言,VB.NET是一门高级的编程语言,当然在Basic系语言中VB.NET也确实是迄今为止最强大的一门编程语言.Visual Basic .NE ...
- 虚机中访问外网;NAT中的POSTROUTING是怎么搞的?
看下docker中是怎么配置的网络 在虚机中访问外网:设定了qemu,在主机上添加路由:sudo iptables -t nat -I POSTROUTING -s 192.168.1.110 -j ...
- mac系统安装/升级node
一.安装 1.node 是通过brew来安装的,所以第一步先安装brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Ho ...