offsetWidth,clientWidth的区别

offsetWidth,clientWidth的区别offsetWidth offsetHeight ,offsetLeft offsetTopscrollWidth scrollHeight ,scrollLeft scrollTopclientWidth clientHeight 对象的实际宽度和高度      offsetWidth,offsetHeight  offsetWidth=width+padd

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

偏移量
offsetWidth    
元素在水平方向上占用的空间大小

                       包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度 

                       offsetWidth=width+padding+border

offsetHeight   元素在垂直方向上占用的空间大小 

                       包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度

                       offsetHeight=height+padding+border

offsetLeft       元素的左外边框至包含元素的左内边框之间的像素距离

offsetTop       元素的上外边框至包含元素的上内边框之间的像素距离

客户区大小

clientWidth :可见区域的宽度;clientWidth=width+padding

clientHeight:可见区域的高度;clientHeight=width+padding

对象距离左侧和顶部的距离     offsetLeft,offsetTop 

对象可视区域的宽度和高度     clientWidth,clientHeight   clientWidth=width+padding

对象滚动宽度和高度                scrollWidth,scrollHeight    (对象的实际内容的宽度,不包边线宽度)

对象左侧和顶部滚动的距离     scrollLeft,scrollTop   

滚动大小

scrollWidth没有滚动条的情况下,元素内容的总宽度;

scrollHeight没有滚动条的情况下,元素内容的总高度;

scrollLeft      :
被隐藏在内容区域左侧的像素距离

scrollTop      :被隐藏在内容区域顶部的像素距离

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度:window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

参考文献:《javascript高级程序设计》

友情链接:http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

友情链接http://blog.csdn.net/piziliweiguang/article/details/7762770

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

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

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


相关推荐

  • java的重载和重写实例_java中重写和重载的区别

    java的重载和重写实例_java中重写和重载的区别重写只存在于子类与父类中 重载存在于一个类中 具体区别如下 一 重写 override override 是重写 覆盖 了一个方法 以实现不同的功能 一般是用于子类在继承父类时 重写 重新实现 父类中的方法 重写 覆盖 的规则 1 重写方法的参数列表必须完全与被重写的方法的相同 否则不能称其为重写而是重载 2 重写方法的访问修饰符一定要大于被重写方法的访问修饰符 public gt protecte

    2025年10月23日
    4
  • C#全角转换成半角并检查建议收藏

    新建一个项目quanbanjiao,在此项目下新建一个类Class11usingSystem;2usingSystem.Web;3usingSystem.Text;45name

    2021年12月20日
    49
  • 机器学习算法(一)SVM

    机器学习算法(一)SVM支持向量机(supportvectormachines,SVM)是一种二分类模型,它将实例的特征向量映射为空间中的一些点,SVM的目的就是想要画出一条线,以“最好地”区分这两类点,以至如果以后有了新的点,这条线也能做出很好的分类。SVM适合中小型数据样本、非线性、高维的分类问题。SVM最早是由VladimirN.Vapnik和AlexeyYa.Chervonenkis在1963年提出,目前的版本(softmargin)是由CorinnaCortes和Vapnik在1

    2022年10月6日
    3
  • Python学习笔记(15)-Python代码转换为exe可执行程序详解

    Python学习笔记(15)-Python代码转换为exe可执行程序详解一,简介Python写完程序,要靠命令执行那么行,太低调了,还不华丽了。再说别人的电脑,都没有Python库,怎么执行,还能不能愉快的一起玩耍了。所以哪怕只会写一个HelloWorld,也要弄成exe程序,方便伟大的代码传播事业。其实很简单,有一个现成的pyInstaller工具,直接用就是了。二,pyInstaller安装配置1,打开网址:pyInstalller下载网址如图:因为我的Pyth

    2022年6月1日
    50
  • 自动化测试用例如何编写_测试用例设计流程思路

    自动化测试用例如何编写_测试用例设计流程思路前言用过pytest的小伙伴都知道,pytest的运行方式是非常丰富的,可以说是你想怎么运行怎么运行,想运行哪些运行哪些,那httprunner是否同样可以呢?运行用例的各种方式运行指定路径的用

    2022年7月28日
    5
  • DirectX修复工具增强版「建议收藏」

    最后更新:2019-9-4DirectX修复工具最新版:DirectXRepairV3.9增强版NEW!版本号:V3.9.0.29371大小:111MB/7z格式压缩,196MB/zip格式压缩,345MB/解压后其他版本:标准版在线修复版MD5校验码:DirectXRepair.exe/eeab9900cc4c10da8e6b786e5f79d09c…

    2022年4月18日
    92

发表回复

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

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