scrollWidth、clientWidth、offsetWidth、width的区别

作者:一Left一
链接:https://www.jianshu.com/p/76ba0d71bd7c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
innerWidth:
window.innerHeight=浏览器窗口的内部高度
window.innerWidth=浏览器窗口的内部宽度

例子 textarea

1、元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。

 

 

 
 

2、元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。

 

 

 

3、offsetWidth和width区别
offsetWidth属性可以返回对象的padding+border+元素width属性值之和,style.width返回值就是定义的width属性值。
offsetWidth属性仅是可读属性,而style.width是可读写的。
offsetWidth属性返回值是整数,而style.width的返回值是字符串,并且带有单位。
4.style.width仅能返回以style方式定义的内部样式表的width属性值。

推荐这些文章:

ace admin v1.4 解决iframe中显示表格宽度超过边界时,横向滚动条不出现问题

原来用的ace admin 横向滚动条是正常的,升级为最新版本的ace admin前端框架后横向滚动条不显示了,找了一天问题,最后发现ace.min.css中有如下设置:
@media only screen and (max-width:991px) {    body {   &nb...

js基础---其余的样式相关的属性/判断滚动条是否到底

        注意:以下样式都是只读的
    
        元素.clientHeight
      &n...

建议收藏: jq 获取各个元素的宽度高度的方法

JS获取各种宽度、高度的简单介绍:
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 ...

直播平台开发,伸缩式菜单,随意调整菜单栏横向的大小

直播平台开发,伸缩式菜单,随意调整菜单栏横向的大小实现的相关代码
 
/*拖拽区div样式*/.resize {    cursor: col-resize;    position: relative;    // top: 45%;    to...

其它样式获取 clientWidth clientHeight offsetWidth offsetHeight offsetParent offsetLeft offsetTop scrollHeight scrollWidth

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"...

性能优化-懒加载(图片 组件 路由)

为什么需要懒加载?
      组件、图片、路由对页面加载速度影响非常大。比如,当一个页面内容比较多的时候,加载速度就会大大的降低,极大的影响到用户体验 。更有甚者,一个页面可能会有几百个图片,但是页面上仅仅只显示前几张图片,那其他的图片是否可以晚点加载用于提高性能。
 
什么是懒加载?
&nbs...

JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

offsetWidth       //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
offsetHeight      //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
clientWidth     &nb...

javascript offsetLeft,Left,clientLeft 各种浏览器位置相关属性

javaScript窗口属性: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientH...

再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀。。。。)
event对象位置信息获取

先总结下区别:
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包...

document文档视图尺寸

1.空白文档

 
 
 
document.body是基于body标签  表示整个文档的高度  
doucment.ducumentElement.clientHeight/clientWidth 是基于html标签  表示浏览器的可视区域(不包括控制台,菜单栏,滚...

文章标题:scrollWidth、clientWidth、offsetWidth、width的区别
文章链接:https://www.dianjilingqu.com/51599.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>