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


相关推荐

  • Spring.NET学习笔记(6)-基础AOP

    Spring.NET学习笔记(6)-基础AOP

    2021年8月1日
    60
  • copy和deepcopy[通俗易懂]

    copy和deepcopy[通俗易懂]总结一下,如果一个集合中的元素是字符串,copy之后则是两个互不相干的新集合,内存地址也不一样,修改任意一个另一个不会做出改变,但是如果其中的元素有数组的话,那么情况就不一样了,copy后虽然集合是两个完全新的集合,但是集合中的数组指向的是同一个内存地址,在此集合中对其中的数组数据进行修改,另一个集合中的元素是数组的内容也会改变,如果想完完全全独立出来是两个独立的集合,就得使用deepcopy而不…

    2022年10月2日
    2
  • docker安装elasticsearch 7.6.2「建议收藏」

    docker安装elasticsearch 7.6.2「建议收藏」小伙伴们,你们好呀!我是老寇!安装elasticsearch的教程数不胜数,本文的安装方式是经过自己测试的,因此分享给有需要的小伙伴,一来是避免小伙伴少走弯路,二来方便后面知识的整合。本文是基于ES7.6.2的版本进行安装的,话不多说,我们开始吧。目录一、提前条件二、安装过程1.拉取镜像2.启动容器3.配置文件4.设置密码5.退出容器6.重启容器7.谷歌插件一、提前条件谷歌插件:elasticsearch-head服务器:centos7.5(

    2022年6月6日
    67
  • java数组截取[通俗易懂]

    java数组截取[通俗易懂]JAVA数组截取publicclassDay12_2{publicstaticvoidmain(String[]args){int[]A=newint[]{1,3,5,7,9};intstart=1;intend=3;arraySub(A,start,end);}public…

    2022年6月11日
    30
  • stm32之IIC应用实例(AT24C02芯片,硬件和软件方式驱动)「建议收藏」

    stm32之IIC应用实例(AT24C02芯片,硬件和软件方式驱动)「建议收藏」目录1.物理层:2.协议层:3.数据的传输:4.程序设计写完回头一看发现字数还不少,如果你觉得文字太枯燥,那么可以跳到后面程序设计,直接动手做实验。如果想仔细了解关于IIC协议的细节,那么希望你能慢慢把看完,看完后一定有所收获。概述:IICBUS(InterIntegratedCircuitBUS,内部集成电路总线)是飞利浦公司推出的二线制串行扩展总线;在IIC总线…

    2025年7月27日
    2
  • oracle 11与plsql安装教程

    oracle 11与plsql安装教程1、下载oracle登录oracle官网,下载oracle11标准版,11版本的两个文件都要下载,下载之前先接受许可,地址是https://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html。下载完毕后将两个文件解压在一个目录下。2、安装安装过程中会修改注册表,所以先关闭杀…

    2022年6月17日
    43

发表回复

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

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