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)
上一篇 2022年7月22日 下午4:16
下一篇 2022年7月22日 下午4:16


相关推荐

  • 扣子(Coze)实战:输入自媒体赛道=自动生成运营策略图文笔记!

    扣子(Coze)实战:输入自媒体赛道=自动生成运营策略图文笔记!

    2026年3月12日
    5
  • sudoers修改_为用户增加sudo权限(修改sudoers文件)

    sudoers修改_为用户增加sudo权限(修改sudoers文件)在使用Linux系统过程中,通常情况下,我们都会使用普通用户进行日常操作,而root用户只有在权限分配及系统设置时才会使用,而root用户的密码也不可能公开。普通用户执行到系统程序时,需要临时提升权限,sudo就是我们常用的命令,仅需要输入当前用户密码,便可以完成权限的临时提升。在使用sudo命令的过程中,我们经常会遇到当前用户不在sudoers文件中的提示信息,如果解决该问题呢?通过下面几个步骤…

    2022年6月20日
    36
  • 我们究竟在为谁而工作?80%的人没有搞懂.

    首问: 我们的价值观是什么?首先要明白自己的价值观是什么?我们想过什么样的生活,我们将来要成为什么样的人?我现在的工作我满意吗?我现在的工作态度满意吗? 我觉得首先要问清楚自己这些…

    2021年6月21日
    148
  • idea配置maven项目(超详细)

    idea配置maven项目(超详细)一 使用步骤 1 在 Idea 中配置 maven 1 打开 Idea 点击 File 然后点击 Settings 进入设置 或者直接按 Ctrl Alt S 进入设置在这里插入图片描述 2 先在左上角的搜索框输入 maven 找到 maven 后单击 然后在右边的 mavenhomepat 的右边选择你的 maven 安装路径 选择到根目录就好了 然后点击确定 具体步骤看下图 在这里插入图片描述 3 Localreposit 是 maven 的本地仓库 默认路径是 C UsersAdminis

    2026年3月18日
    1
  • OpenCV学习笔记(29)KAZE 算法原理与源码分析(三)特征检测与描述

    OpenCV学习笔记(29)KAZE 算法原理与源码分析(三)特征检测与描述KAZE系列笔记:1. OpenCV学习笔记(27)KAZE算法原理与源码分析(一)非线性扩散滤波2. OpenCV学习笔记(28)KAZE算法原理与源码分析(二)非线性尺度空间构建3. OpenCV学习笔记(29)KAZE算法原理与源码分析(三)特征检测与描述4. OpenCV学习笔记(30)KAZE算法原理与源码分析(四)KAZE特征的性能分析与比较5. OpenCV学习笔记

    2022年6月18日
    41
  • Luci配置文件

    Luci配置文件部分文件 仅供参考 具体使用请参照官方说明 http luci subsignal org api luci modules luci model uci html1 batmandconfi optioninterf ath0 optionannoun optiongatewa class optionorig

    2026年3月19日
    2

发表回复

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

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