JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条。
document.body.clientHeight 获取body元素对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条。
浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的。所以当给body设置width和height时,在IE7中clientWidth和clientHeight的值是要比其它浏览器中的值小一些的。
document.body.offsetWidth 获取body元素对象的宽度,即offsetWidth=width+padding+border,也可以写成offsetWidth=clientWidth+border。
document.body.offsetHeight 获取body元素对象的高度,即offsetHeight=height+padding+border,也可以写成offsetHeight=clientHeight+border。
浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的。所以offsetWidth和offsetHeight的值还需要加上滚动条的宽度。当然最终的值和其它浏览器是一样的。
document.body.scrollWidth 获取body元素对象内容的实际宽度,即对象的滚动宽度。
document.body.scrollHeight 获取body元素对象内容的实际高度,即对象的滚动高度。 浏览器兼容性 在FireFox和IE中,其获取的就是body元素对象内部内容的实际宽高。 在Chrome、Safari、Opera中,scrollWidth和scrollHeight获取的是整个页面文档的滚动宽高。
document.body.clientLeft 获取body元素对象的左边框的宽度。
document.body.clientTop 获取body元素对象的上边框的宽度。 浏览器兼容性 各浏览器表现一致。
document.body.offsetLeft 获取body元素对象相对于自身的位置。
document.body.offsetTop 获取body元素对象相对于自身的位置。 浏览器兼容性 在Chrome、Opera、Safari、IE8、IE9和IE10中,工作正常,offsetLeft和offsetTop的值都为0。 在FireFox中,offsetLeft和offsetTop的值为负的body元素的border-width。 在IE7中,offsetLeft和offsetTop指的是body元素对象的边框(不包括边框)到页面文档边缘的距离。
document.body.scrollLeft 获取页面文档向右滚动过的像素数。
document.body.scrollTop 获取页面文档向下滚动过的像素数。 浏览器兼容性 在FireFox、IE8、IE9和IE10中,scrollLeft和scrollTop的值始终为0。 在IE7中,scrollLeft和scrollTop的值为body元素对象最顶端和对象内容的最顶端之间的距离,即滚动条滚过的距离。
JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft的更多相关文章
- 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)
滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...
- clientWidth,offsetWidth,scrollWidth区别
<html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- JS中关于clientWidth offsetWidth scrollWidth 等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js中的clientWidth offsetWidth scrollWidth等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- clientWidth offsetWidth scrollWidth
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js的元素对象
元素对象(element对象) ** 要操作element对象,首先必须要获取到element, - 使用document里面相应的方法获取 ...
随机推荐
- 一些排序算法的Python实现
''' Created on 2016/12/16 Created by freeol.cn 一些排序算法的Python实现 @author: 拽拽绅士 ''' '''值交换''' def swap( ...
- 最短路径——Bellman-Ford算法以及SPFA算法
说完dijkstra算法,有提到过朴素dij算法无法处理负权边的情况,这里就需要用到Bellman-Ford算法,抛弃贪心的想法,牺牲时间的基础上,换取负权有向图的处理正确. 单源最短路径 Bellm ...
- 【工具学习】——教你读懂Maven的配置文件
[前言] 最近在项目中用到了maven工具,相信很多第一次接触maven的人都有这样的困惑,maven的文件很简单,就像下图中的结构一样,但是它的功能十分强大,那是怎么做到的呢?配置文件!配置文件里是 ...
- 【EasyNetQ】- 简介
EasyNetQ是一个简单易用的,稳定的的RabbitMQ .NET API . 如果您只想尽快启动并运行,请转到“ 快速开始”指南. EasyNetQ的目标是提供一个库,使得在.NET中使用Rabb ...
- Redis能做什么?不能做什么?
https://blog.csdn.net/u014229282/article/details/81174202 最近阅读了<redis设计与实现>,这是一本比较枯燥的书,毕竟涉及到re ...
- spring MVC 字符串数组传值 字符带有逗号,问题
按照如下图所示方式传值,想在后台得到一个长度为1的数组,后台直接根据,进行分割,就得到长度为2的数组 1.曲线救国解决法 解决方案, 前端对参数进行编码 encodeURIComponent(valu ...
- 【bzoj4750】密码安全 单调栈
题目描述 模10^9+61 输入 第一行包含一个正整数 T ,表示有 T 组测试数据. 接下来依次给出每组测试数据.对于每组测试数据: 第一行包含一个正整数 n . 第二行包含 n 个非负整数,表示 ...
- POJ3415 Common Substrings 【后缀数组 + 单调栈】
常见的子串 时间限制: 5000MS 内存限制: 65536K 提交总数: 11942 接受: 4051 描述 字符串T的子字符串被定义为: Ť(我,ķ)= Ť 我 Ť 我 1 ... Ť I ...
- 【NOIP 模拟赛】Evensgn 剪树枝 树形dp
由于树规做的少所以即使我考试想出来正确的状态也不会转移. 一般dp的转移不那么繁杂(除了插头.....),即使多那也是清晰明了的,而且按照树规的一般思路,我们是从下到上的,所以我们要尽量简洁地从儿子那 ...
- SCOI2010 传送带 [三分/模拟退火]
题目描述 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD上的移动速度为Q,在平面上的移动速度R.现在lxh ...