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


相关推荐

  • 驰骋工作流jeesite4_jflow的安装讲解

    驰骋工作流jeesite4_jflow的安装讲解Jeesite4 Jflow 安装讲解百度搜索 jflow4 jflow 打开链接进入到码云上 在克隆下载里面选择你所需要的下载方式 推荐 svn 下载 后期可随时更新代码 代码更新是通过 svn 提交 码云转换其他会有延迟 其他方式你获取的可能不是最新代码 2 复制 svn 的链接 svn gitee com thinkgem jeesite4 jflow SVNCheckout 下载到本机上 下载的账号密码为码云账号密码

    2025年7月6日
    0
  • 从零开始学习Linux笔记

    从零开始学习Linux,记录笔记,担心自己以后会忘,也供大家茶余饭后,闲来无事看看,自己的理解只能到这,也希望大家可以指出我的错误让我可以有一点点进步,以后会一直更新

    2022年4月14日
    39
  • API之FindWindowEx和SendMessage

    API之FindWindowEx和SendMessage最近在VC6.0开发中碰到了两个函数,经过一番搜索查阅,特记录于此。

    2022年5月27日
    33
  • linux smartd failed

    linux smartd failed

    2021年8月6日
    49
  • git拉取代码密码错误_idea提交git

    git拉取代码密码错误_idea提交gitgit提交代码1:一定要先pull,(在本地建立仓库)eclipse中点击file找到term中的pull,同步拉取远程代码,idea中tomcat旁边斜向下箭头,拉取,首次拉取要输入用户名密码,2:提交到本地仓库commit,并填写提交备注,方便查找,3:push推送远程分支,提交到git分支。常见的pull失败:冲突-多个人修改同一个文件,别人修改后自己也修改导致拉取失败,解决冲突…

    2022年10月21日
    0
  • Js保留两位小数_如何保留两位小数

    Js保留两位小数_如何保留两位小数一、“四舍五入”算法  1.四舍五入的情况varnum=4.2167456;num=num.toFixed(2);//输出结果为4.22varnum=4.2167456;num=Math.round(num*100)/100;//输出结果为4.22varnum=4.2007456;num=Math.round(num*…

    2022年8月10日
    5

发表回复

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

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