浏览器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属性,与clientWidth、offsetWidth均无关

 

浏览器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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • pycharm使用pip安装第三方库_pycharm详细安装教程

    pycharm使用pip安装第三方库_pycharm详细安装教程python的安装教程1.打开python官网2.windows系统点Downloads下面的windows3.带64的表示电脑是64位系统的,其中不带64的表示32位操作系统的,而右边一列数字后面有字母(即带有后缀)的不建议下载,就是临时版本,而我们最好下载3.6的版本。1.DownloadWindowsx86-64embeddablezipfile这是一个压缩文件2.DownloadWindowsx86-64executableinstaller这是一个可执行的文件

    2022年8月26日
  • pycharm无法使用第三方库_python第三方库安装失败

    pycharm无法使用第三方库_python第三方库安装失败前言:在使用pycharm学习python的时候,经常需要第三方库,没有第三方库程序就会报错,pycharm也会提醒你要安装所需要的库,安装第三方库的时候往往就出现了问题,如图;下面我将谈谈一些我遇到的问题及解决经验。1.检查pip是否为最新版本pip不是最新版本时,会直接导致你安装第三方库失败。解决方法:第一,看是否直接在pycharm的setting里面Project下的Projec…

    2022年8月27日
  • nc瑞士军刀详情

    nc瑞士军刀详情查看头文件nc-nv0.0.0.0IP地址80端口号(类telnet功能)head/聊天功能(传输是明文)nc相互传输文本信息(两台电脑实现类聊天功能)A:nc-lp4444

    2022年7月2日
  • Kettle工具入门[通俗易懂]

    Kettle工具入门[通俗易懂]Kettle工具入门Kettle工具入门 Kettle是什么? 为什么要用Kettle? 怎么用Kettle? 下载运行 简单应用 表到表转换 json到表的操作 参考 Kettle是什么?Kettle是水壶。“多喝热水”是我们对女朋友美好的祝福。因为未经处理的生水(原始数据),含有各种杂质(脏数据),无法直接饮用(入…

    2022年10月17日
  • IE内嵌google chrome frame解决浏览器兼容问题

    IE内嵌google chrome frame解决浏览器兼容问题参考文献:http://www.pseudowired.com/2012/12/04/tomcat-http-header-manipulation/(html中自动添加使用chrome的header)http://www.baike.com/wiki/Google+Chrome+Frame(googlechromeframe介绍)http://www.cnbl

    2022年7月16日
  • 协方差矩阵的计算及意义「建议收藏」

    协方差矩阵的计算及意义「建议收藏」声明:博文转自https://blog.csdn.net/mr_hhh/article/details/78490576一、首先看一个比较简洁明了的协方差计算介绍:1.协方差定义X、Y是两个随机变量,X、Y的协方差cov(X,Y)定义为:其中,2.协方差矩阵定义矩阵中的数据按行排列与按列排列求出的协方差矩阵是不同的,这里默认数据是按行排列。即每一行是一个obs…

    2022年6月28日

发表回复

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

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