平时写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. face='Webdings' 的字体对照表

    刚才研究动网论坛代码,发现一个页面提示标记 i 感觉很神奇,看了半天才明白原来是一种叫“Webdings”的字体,其实很简单,只需要<font face='webdings' size=&quo ...

  2. uva10883_Supermean_数学

    题目大意:给出n个数,每相邻两个数求平均数,得到n-1个数,再求平均数,得到n-2个数,......一直到最后一个数,输出这个数. 题目很简单,就是中间数据会比较大有点复杂,超过double的范围,而 ...

  3. Hadoop 三剑客之 —— 集群资源管理器 YARN

    一.hadoop yarn 简介 二.YARN架构         1. ResourceManager         2. NodeManager         3. ApplicationMa ...

  4. SQL Server 2012完全备份、差异备份、事务日志备份和还原操作;

    SQL Server 2012完全备份.差异备份.事务日志备份和还原操作: 1.首先,建立一个测试数据库,TestA:添加一张表,录入二条数据:备份操作这里我就不详细截图和讲解了.相信大家都会备份,我 ...

  5. linux 环境 安装jdk tomcat mysql git

    1.安装JDK 1.官方下载jdk,linux版本的rpm包 2.安装rz sz ----------编译安装 //安装 cd /tmp wget http://www.ohse.de/uwe/rel ...

  6. ABP开发框架前后端开发系列---(13)高级查询功能及界面的处理

    在一般的检索界面中,基于界面易用和美观方便的考虑,我们往往只提供一些常用的条件查询进行列表数据的查询,但是有时候一些业务表字段很多,一些不常见的条件可能在某些场景下也需要用到.因此我们在通用的查询条件 ...

  7. PATB 1038. 统计同成绩学生(20)

    https://www.patest.cn/contests/pat-b-practise/1038 #include <cstdio> int cnt[110]; int temp[10 ...

  8. 深度探索c++对象模型 第一章

    1,声明与定义. //声明式如下: extern int x;   //对象式(变量式)声明 std::size_t numDigits(int number);  //函数式声明 class Wid ...

  9. Codeforces 348B:Apple Tree(DFS+LCM+思维)

    http://codeforces.com/contest/348/problem/B 题意:给一棵树,每个叶子结点有w[i]个苹果,每个子树的苹果数量为该子树所有叶子结点苹果数量之和,要使得每个结点 ...

  10. java html中文汉字 反转义

    import org.apache.commons.lang.StringEscapeUtils; public class EscapeHtml { /** * @param args */ pub ...