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


相关推荐

  • qmake的使用

    qmake的使用前言在linux环境下进行程序开发时,经常需要使用makefile管理编译代码,特别是一些大型工程,而makefile工具语法晦涩深入研究较为困难,好在有很多工具可以自动生成makefile,qmake就是其中的一种。qmake特点为不同的平台的开发项目创建makefile。可以供给任何一个软件项目使用,而不用管它是不是用Qt写的,尽管它包含了为支持Qt开发所拥有的额外的特征。…

    2022年5月19日
    170
  • docker 镜像构建_dockerfile引入两个镜像

    docker 镜像构建_dockerfile引入两个镜像前言如果我们已经安装了一个python3的环境,如果另一台机器也需要安装同样的环境又要敲一遍,很麻烦,这里可以配置Dockerfile文件,让其自动安装,类似shell脚本Dockerfile编写

    2022年7月30日
    103
  • 基于Paddle Serving&百度智能边缘BIE的边缘AI解决方案[通俗易懂]

    基于Paddle Serving&百度智能边缘BIE的边缘AI解决方案[通俗易懂]PaddleServing作为飞桨(PaddlePaddle)开源的服务化部署服务化方案,提供了C++Serving和PythonPipeline两套框架,旨在帮助深度学习开发者和企…

    2025年7月1日
    7
  • pychram 激活码-激活码分享

    (pychram 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    50
  • [转]使用控件的RenderControl()方法导出Excel

    [转]使用控件的RenderControl()方法导出Excel//使用控件的RenderControl()方法生成HTML表格stringstrName=”HuaMingCe”;Response.Clear();Response.Buffer=true;Response.Charset=”utf-8″;Response.AppendH…

    2022年7月20日
    14
  • 小猴子吃了一堆桃,第一天吃了一半_Java猴子吃桃问题

    小猴子吃了一堆桃,第一天吃了一半_Java猴子吃桃问题7-5 猴子吃桃问题 (20分)一只猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个;第二天早上又将剩下的桃子吃掉一半,又多吃了一个。以后每天早上都吃了前一天剩下的一半加一个。到第N天早上想再吃时,见只剩下一个桃子了。问:第一天共摘了多少个桃子?输入格式: 输入在一行中给出正整数N(1<N≤10)。输出格式: 在一行中输出第一天共摘了多少个桃子。输入样例: 3 …

    2022年8月18日
    11

发表回复

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

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