浏览器offsetWidth、clientWidth、scrollWith等总结

浏览器offsetWidth、clientWidth、scrollWith等总结  对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。  1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。  clientWidth = 元素width+padding  2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。  无滚动时等于c…

大家好,又见面了,我是你们的朋友全栈君。

    对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。

    1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。

    clientWidth  =  元素width + padding

    2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。

    无滚动时等于clientWidth,有滚动时,需要计算

    3、offsetWidth:对象的可见宽度,包括滚动条等边线,会随窗口的显示大小改变。

    offsetWidth  =  元素width + padding + border

    CSS中的margin属性,与clientWidthoffsetWidth均无关

 

浏览器offsetWidth、clientWidth、scrollWith等总结

    4、width:不包括滚动条和工具条的宽度。

    5、innerWidth:窗口中文档显示区域的宽度,不包括菜单栏、工具栏等部分,该属性可读可写。注意,IE浏览器不支持该属性。

    6、outerWidth:窗口中文档显示区域的宽度,包含菜单栏、工具栏等部分。

        获取outerWidth有两个jquery方法

        outerWidth():outerWidth  =  padding + border

        outerWidth(true): outerWidth  =  margin + padding + border

 

    注意事项:

    1.获取这些尺寸信息时,clientWidth、scrollWidth和offsetWidth用<document.getElementById(‘Id’).属性>形式获取,它们是javascript对象属性,没有jquery方法。

    2.有jquery方法的是: width()、 innerWidth()outerWidth()outerWidth(true)

    3.一般情况下 width() <= innerWidth() <= outerWidth() <= outerWidth(true)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/163057.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 数据结构之哈希表(HASH)

    前言   当我们在编程过程中,往往需要对线性表进行查找操作。在顺序表中查找时,需要从表头开始,依次遍历比较a[i]与key的值是否相等,直到相等才返回索引i;在有序表中查找时,我们经常使用的是二分查找,通过比较key与a[i]的大小来折半查找,直到相等时才返回索引i。最终通过索引找到我们要找的元素。   但是,这两种方法的效率都依赖于查找中比较的次数。我们有一种想法,能不能不经过比较,而是

    2022年4月1日
    76
  • Win10安装wget_linux wget安装

    Win10安装wget_linux wget安装安装下载点击下载依次如下:1.2、将下载好的wget.exe放到C:/windows/system32文件夹下3.3、在cmd中输入wget–version如下则成功:测试下载图片wgethttp://q1.xiongmaoya.com/2021/08/09/26045/1.jpg

    2022年10月17日
    0
  • 遗传算法经典实例matlab代码_遗传算法编码方式

    遗传算法经典实例matlab代码_遗传算法编码方式目录一、遗传算法概述二、遗传算法的特点和应用三、遗传算法的基本流程及实现技术3.1遗传算法的基本流程3.2遗传算法的实现技术1.编码2.适应度函数3.选择算子4.交叉算子5.变异算子6.运行参数四、遗传算法的基本原理4.1模式定理4.2积木块假设五、遗传算法编程实例(MATLAB)一、遗传算法概述遗传算法(…

    2022年9月12日
    0
  • Win10安装jdk11及环境变量配置

    Win10安装jdk11及环境变量配置Win10安装jdk11及环境变量配置写在前面卸载旧版本jdk下载jdk11配置环境变量经验教训写在前面我第一次安装java是在17年初,距离现在已经一年半了。今天上oracle官网一看,jdk都已经更新到11.0.1了,然而我用的还是1.8.0_171版本的老古董,遂决定把jdk升级一下,结果没想到这一升级就折腾了老半天。在这里把我的升级的详细步骤以及经验教训和大家分享一下。卸载旧版本jd…

    2022年7月24日
    8
  • 内网穿透 隧道_内网渗透攻击

    内网穿透 隧道_内网渗透攻击本文研究DNS隧道的一个经典工具,iodine

    2022年10月28日
    0
  • 通达OA 工作流执行出现的异常现象处理(图文)

    通达OA 工作流执行出现的异常现象处理(图文)一个朋友用的工作流,突然说这里面多了很多人不应该看到这个流程的,就是在查询工作时,最上面多了一个“查阅信息”项,然后最下面多了很多人查询的记录。这个项目是从哪里来的呢?普通的流程倒也无所谓了,而有些流程如发文、任职等还是需要保密的,这样让大家查阅肯定是不行的。一开始以为是使用了工作流的转存文件柜的功能,实验了一下,这样转存后并不会在流程里关联查看到查阅信息。又实验了一下转发布公告,同样不是。最后咨

    2022年6月23日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号