平时写js的时候,有时候会遇到这样的情况,需要去计算元素或者屏幕的宽度,再进行不同的处理,但是宽度真的有不少,很容易搞混,特此总结下,也希望大家亲测下,这样比较有体会,记得牢固些。

  1、scrollWidth:指的是元素的内容宽度,会随着内容撑大,不包边线宽度。

  2、clientWidth:指的是元素的可视区域的宽度,不会随着内容撑大,不包边线宽度,如果不出现横向滚动条,则等于scrollWidth,如果出现,则小于scrollWidth。

  3、offectWidth:指的是元素的实际宽度,包含边线宽度,和CSS关系较大。

  由上可知:

  元素出现横向滚动条,clientWidth < offectWidth < scrollWidth

  元素不出现横向滚动条,clientWidth = scrollWidth < offectWidth

  另外提下,window.screen.width计算屏幕宽度很方便。

宽度总结-scrollWidth,clientWidth,offectWidth的更多相关文章

  1. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...

  3. web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...

  4. 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  5. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  6. 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片(网上找的,未经试验,但觉得比较好)

    获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...

  7. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

  8. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  9. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

随机推荐

  1. 如何在项目中添加Log4net_web.config

    <log4net> <appender name="ConsoleAppender" type="log4net.Appender.ConsoleApp ...

  2. Capsule Network

    Capsule Network最大的特色在于vector in vector out & 动态路由算法. vector in vector out 所谓vector in vector out ...

  3. Linux命令执行顺序与管道命令

    命令执行顺序控制 顺序执行多条命令:command1;command2;command3... 有选择执行命令:which command1 && command2 || comman ...

  4. qtextedit中的光标问题(通过调用repaint去掉Focus的阴影)

    [问题]两个textedit,取名为view0,view1.实现view0输入固定的字符个数后,用setFocus切换聚焦到view1,但是切换完了之后view0还会保留光标残影,出现两个文本框中都有 ...

  5. is和==的区别以及编码和解码

    一.is和==的区别 python中对象包含的三个基本要素分别是:id(身份标识),type(数据类型),value(值) is和==都是对对象进行比较判断的,但对对象比较判断的内容不同. ★==是p ...

  6. cookie,session,用户认证组件

    一. 绘画跟踪技术 在客户端与服务端的一次会务中,多次的请求与相应,HTTP协议是无状态协议,也就是说每个请求都是独立的!无法记录前一次请求的状态.会话跟踪技术即能够实现多次回话间信息共享的作用,HT ...

  7. awk数组统计

    处理以下文件内容,将域名取出并根据域名进行计数排序处理:(百度和sohu面试题) http://www.etiantian.org/index.html http://www.etiantian.or ...

  8. Spring Cloud Config 使用SVN 和 git方式的相关配置

    文件的存储方式: 1.使用svn 当做配置中心 config server的配置方式: 引入svn的包 <dependency> <groupId>org.tmatesoft. ...

  9. Laravel --- 如何较优雅的使用公用函数

    一.创建公用文件 App/Helpers/CommonHelper.php 二.创建Provider php artisan make:provider HelperServiceProvider C ...

  10. 强制等待&隐士等待&显示等待&元素定位方法封装

    前言 问题 学习selenium的同学估计大多数都遇见过一个问题 明明页面已经精准的定位到了元素,但是执行脚本的时候却经常报错没找到元素.其实原因很简单,就是脚本执行的速度很快,而浏览器加载页面的时候 ...