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


相关推荐

  • zblog2.X 连不上数据库原因

    zblog2.X 连不上数据库原因

    2021年11月17日
    42
  • c语言交通灯简单编程_在第一个交通灯处左转的英文

    c语言交通灯简单编程_在第一个交通灯处左转的英文内容介绍原文档由会员½ӨӨ发布交通灯控制系统设计1万字32页包括程序代码,系统原理图,Proteus仿真过程摘要本设计是交通信号灯控制系统,随着社会的不断的进步,社会的不断发展。交通也日渐复杂,交通的自动化也不断更新,交通的一些指挥系统光靠人来完成是远远不够的,这就需要设计各种交通指挥自动化系统来完成这些复杂的工作。从而使交通指挥系统更加有秩序,更加安全。至此本人设计了交通信号灯控制系统,来…

    2025年12月5日
    2
  • centos7 rabbitmq安装_阿里云 k8s

    centos7 rabbitmq安装_阿里云 k8s我这里使用三台阿里云服务器搭建RabbitMQ集群。1.首先使用cat/etc/hostname查看自己这三台云服务器的名字。当然也可以按照自己的想法修改,使用vim/etc/hostname就可已修改,如何进行编辑和保存,可以百度搜一下。保存之后,需要重启云服务器才能生效。图中1和2都是hostname,修改过/etc/hostname之后,必须重启之后,1和/etc/hostname的值才能一样。2.使用vim/etc/hosts填写下边的格式的内容:xxx.xxx.xxx.xxxh

    2025年10月18日
    4
  • Idea激活码最新教程2021.1.2版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2021.1.2版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2021 1 2 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2021 1 2 成功激活

    2025年5月22日
    5
  • 数据归一化汇总[通俗易懂]

    数据归一化汇总[通俗易懂]转自http://www.ilovematlab.cn/forum.php?mod=viewthread&tid=74021============外一篇有关mapminmax的用法详解byfaruto==================================几个要说明的函数接口:[Y,PS]=mapminmax(X)[Y,PS]=mapminmax(X,F

    2022年6月23日
    35
  • spring boot 系列之八:SpringBoot处理定时任务

    项目经常会用到定时任务,springboot自然是可以通过整合相关组件来实现的。目前常用的定时任务的实现有两种:通过spring自带的定时器任务@Schedule来实现通过Quartz来实现

    2022年2月16日
    39

发表回复

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

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