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


相关推荐

  • 阿里云ssl证书过期_阿里云acp证书含金量

    阿里云ssl证书过期_阿里云acp证书含金量阿里云提示内容如下:【阿里云】尊敬的:您域名com使用的SSL证书cert-还有1天过期,过期时间2021-04-21。为防止业务受影响,请提前5个工作日续费并更新证书。请尽快登陆控制台处。这是阿里云的SSL证书产品的到期通知,SSL证书主要用于HTTPS加密协议场景包括,电子商务、微信小程序、微信公众号、APP、公司网站等。SSL证书到期后会让对应的项目立即暂停服务,比如微信小程序就会立即停止服务,用户不能正常使用小程序,其它的场景也一样,所以SSL证书到期之前必须要尽快办理续费!SSL证

    2022年9月27日
    0
  • Java + Ajax跨域解决方案整理

    Java + Ajax跨域解决方案整理为什么会跨域呢?简单来说就是前端页面与后台服务没有部署在同一个服务器上。产生跨域的情况有:1.域名不同,端口也不同;2.域名相同但是端口不同;3.域名不同,端口相同。解决方案:一、JSONP方式1.只支持get方法,不支持postfang方法;使用时需修改前端和后端代码,用起来也不太方便,本文不推荐使用。二、使用springMVC架构的,使用版本4.2以上…

    2022年8月24日
    5
  • pycharm虚拟环境下安装第三方库_pycharm虚拟环境下安装第三方库

    pycharm虚拟环境下安装第三方库_pycharm虚拟环境下安装第三方库文章目录前言一、什么是虚拟环境?二、PyCharm中创建虚拟环境1.virualenv2.pipenv3.conda4.导入环境三、包管理总结前言我们在用python进行开发时,往往不同的项目会使用不同的环境,那么如何让不同的环境并存呢?答案是使用虚拟环境。一、什么是虚拟环境?顾名思义,虚拟环境就是一个虚拟的、从电脑中独立开辟出的环境。有点类似于虚拟机,不同的虚拟机之间即可共存,又互不影响,python中使用的虚拟环境亦如此。比如我想要一个python3.9的环境,我就可以创建一个名为py39.

    2022年8月27日
    5
  • Vue学习之v-model指令

    Vue学习之v-model指令Vue学习之v-model指令

    2022年4月23日
    55
  • 数据库导出表结构语句_sqlserver导出表结构

    数据库导出表结构语句_sqlserver导出表结构第一种:利用sql语句查询需要说明的是该方法应该适用很多工具,博主用的是navicatSELECTTABLE_NAME表名,COLUMN_NAME列名,COLUMN_TYPE数据类型,DATA_TYPE字段类型,CHARACTER_MAXIMUM_LENGTH长度,IS_NULLABLE是否为空…

    2022年9月4日
    2
  • 请简述MyBatis框架与Hibernate框架的区别_报告与总结的不同点

    请简述MyBatis框架与Hibernate框架的区别_报告与总结的不同点两者相同点Hibernate与MyBatis都可以是通过SessionFactoryBuider由XML配置文件生成SessionFactory,然后由SessionFactory生成Session,最后由Session来开启执行事务和SQL语句。其中SessionFactoryBuider,SessionFactory,Session的生命周期都是差不多的。Hibernate和MyBatis都…

    2022年9月10日
    0

发表回复

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

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