浏览器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)

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 使用nginx的rewrite实现代理指定文件夹命令方法「建议收藏」

    使用nginx的rewrite实现代理指定文件夹命令方法

  • css 渐变背景_照片背景换成蓝色渐变

    css 渐变背景_照片背景换成蓝色渐变CSS渐变背景看这一篇就够了在我们自己设计网页的时候,为了好看美观,颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景,和一些常用的颜色网站。CSS渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩,看能玩出什么花来。CSS定义了两种渐变类型:一、线性渐变(向下/向上/向左/向右/对角线)我们通过属性linear-gradient来这样定义一个线性渐变。background-image:linear-gradient(方向

    2022年10月22日
  • loadrunner server压力测试 sql_LoadRunner压力测试实例.pdf[通俗易懂]

    loadrunner server压力测试 sql_LoadRunner压力测试实例.pdf[通俗易懂]论坛测试资源交流区专用LoadRunner压力测试实例摘要:本文通过实例讲解介绍了LoadRunner工具的使用,介于公司的实际情况,文中主要是对工具的基本使用做了详细描述,高级运用方面除性能计数器与参数设置外其它均未涉及,待以后补充。目的是使公司人员根据该手册便可以独立运用Loadrunner进行压力测试主题词:Loadrunner工具压力测试1LoadRunne…

  • WIN7系统安装MySQL5.6

    WIN7系统安装MySQL5.6

  • Java实现大整数乘法

    Java实现大整数乘法1问题描述计算两个大整数相乘的结果。2解决方案2.1蛮力法packagecom.liuzhen.chapter5;importjava.math.BigInteger;publicclassBigNumber{/**参数A:进行乘法运算的大整数A,用字符串形式表示*参数B:进行乘法运算的另一个大整数B,用字符串形式表示…

  • jave中的Random中rand.nextInt(int n )的取值范围

    jave中的Random中rand.nextInt(int n )的取值范围1.要求在10到300中产生随机数[10,300]包含10和300.intrandNum=rand.nextInt(300-10+1)+10;rand.nextInt(300-10+1)=rand.nextInt(291)意思是产生[0,291)不包括291再加10就是[10,301)不包括301,如果要包括300所以要rand.nextInt(300-10+1)里面要加1.

发表回复

您的电子邮箱地址不会被公开。

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