盒型详解及不同浏览器兼容

网页可见区域宽： 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;

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

盒型详解及不同浏览器兼容相关推荐

Java基本数据类型——字符型详解
字符型char在Java语言中占用 2 个字节,char类型的字面量必须使用半角的单引号括起来,取值范围为[ 0 - 65535 ],char 和 short 都占用 2 个字节,但是 char 可以 ...
linux 服务器拦截http请求,详解Linux屏蔽浏览器上http请求警报的方法
众所周知,在Linux系统中浏览器的页面上是不允许出现http请求的,如果出现了http请求就会发生错误,并且Linux系统会向用户发出警报.下面,U大侠小编就给大家详解Linux屏蔽浏览器上http ...
详解如何基于Arduino兼容板Teensy LC实现虚拟键盘与鼠标
目录前言硬件环境环境配置 1. 下载Teensy烧录程序 2 下载TeensyDuino 使用方法 1 模拟键盘 1.1 Keyboard库函数介绍: 1.2 Keyboard键码表: 1.3 ...
十三水牌型图片_十三水什么牌型是倒水十三水倒水牌型详解
倒水(相公) 后一副牌牌型小于前一副牌牌型的,即为倒水输每家3水(如果玩家家有大牌,则按4个玩家中最大的牌型赔3家),也正因为此,中墩葫芦以上和三尖刀(冲三)才有翻倍打枪 3人及3人以上玩家均无特 ...
Java基本数据类型——布尔型详解
在 Java 语言中布尔类型的值只包括 true 和 false,没有其他值,不包括 1 和 0,布尔类型的数据在开发中主要使用在逻辑判断方面,例如:如果外面在下雨,我出门带一把雨伞.如果明天休息,咱 ...
06-CSS盒模型详解
本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...
最流行的布局方案 Flex 弹性盒布局详解
Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁.方便.响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的"d ...
【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容） – 叶小钗
这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获在下才疏学浅,文中难 ...
vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条
场景由于iPhoneX去掉了物理按键,改为了底部小黑条,这就会导致屏幕适配问题,最常见的场景就是底部fixed的元素被阻挡的情况.对于这种问题,我们一般采取css或js的处理方式(适用于h5,小程序 ...
Python基本语法_基本数据类型_数值型详解
目录目录软件环境 Python变量调用的过程数值型删除一个数值类型对象布尔型 Bool 标准整型 Int 长整型双精度浮点型 Float 复数数值类型对象的内建功能函数 absNumbe ...

盒型详解及不同浏览器兼容

盒型详解及不同浏览器兼容相关推荐

最新文章

热门文章