文档章节

clientWidth,clientHeight,offsetWidth,offsetHeigh含义

文文1
 文文1
发布于 2015/05/16 10:40
字数 1200
阅读 272
收藏 7

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

屏幕分辨率的高:window.screen.height; 

屏幕可用工作区宽度:window.screen.availWidth; 

屏幕可用工作区高度:window.screen.availHeight;

 

有时会出现取不到值的情况,是因为我的HTML文件头部加了文档类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

或者

<!DOCTYPE html>


解决办法:

1.去掉头部文档类型。(不推荐此方法)

2.把document.body.scrollTop和document.body.scrollLeft这两个家伙改个名字,改成:document.documentElement.scrollTop 和document.documentElement.scrollLeft。当然document.body.clientWidth和document.body.clientHeight也要改名字了,改为:document.documentElement.clientWidth和document.documentElement.clientHeight

scroll:

 jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。

    我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。

    一、滚动条有关属性的正确理解:

    假设有以下Html代码:

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
      <div style="height:750px;">
      </div></div>

 

     由于内部的div标签高度比外部的长,并且外部的div允许自动出现垂直滚动条,所以用浏览器打开后,可以看到垂直滚动条。滚动条向下拖动一段距离,看到的页面效果如下(右部的a、b是我抓图后,用PS标出来的):

    

    那么,这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢?
    有人说,scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实,都不对。
    其实,图中标出的a、b,对我们编程写js代码没有任何具体意义,它仅仅具有象征意义。
    实际上,在js代码里,滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”(b),而是表示滚动条需要滚动的高度,即内部div的高度750px。而scrollTop表示滚动条(一个点)当前的位置在750px里占了多少,不是图中标出的a,所以scrollTop表示这个点(滚动条就是一个点)的位置,而scrollHeight表示这个点需要走的全部路程.

    这时,我们很叹服Windows的设计者,滚动条设计的如此形象美妙,欺骗了多少头脑简单的鼠标操作员。a和b的距离分别标识滚动条滚动了和需要滚动的距离,它们之间分别有一个对应的关系,但这些不是我们这些开发应用程序的程序员考虑的,是设计操作系统GUI图形接口的程序员考虑的。

2判断垂直滚动条是否到达底部
    弄明白了以上的概念,编码其实就比较简单了, 以下是示例代码:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>下拉滚动条滚到底部了吗?</title>
      <script language="javascript" src="jquery-1.10.2.js"></script>
      <script language="javascript">
          $(document).ready(function (){        
                var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
                var nScrollTop = 0;   //滚动到的当前位置
                var nDivHight = $("#div1").height();

                $("#div1").scroll(function(){
                nScrollHight = $(this)[0].scrollHeight;
                nScrollTop = $(this)[0].scrollTop;          
                if(nScrollTop + nDivHight >= nScrollHight)
                    alert("滚动条到底部了");
              });
          });      
      </script>
    <body>
    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
    <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
    </div>
    </body>
    </html>

    代码解说:
    内部div高度为750,外部div高度为500,所以垂直滚动条需要滚动750-500=250的距离,就会到达底部,参见语句nScrollTop + nDivHight >= nScrollHight。
    程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。
    本示例判断的是没有水平滚动条的情况,在有水平滚动条时,情况会有细小的变化,所以nScrollTop + nDivHight >= nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条的时候,等号“=”就足够了。大家可以实际测试一下。还可以判断水平滚动条是否滚动到头了。




本文转载自:

文文1
粉丝 25
博文 450
码字总数 142873
作品 0
长沙
程序员
私信 提问
获取屏幕宽度、浏览器宽度、网页高度,宽度信息

视图模式innerWidth/innerHeight属性(窗口大小) window.innerHeight window.innerWidth window.pageYOffset:Netscape属性,指的是滚动条顶部到网页顶部的距离 网页可见区域宽:document.bo...

飞奔的土豆
2014/09/05
0
0
JS获取屏幕,浏览器,网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offse...

kisshua
2012/05/29
759
0
Js获取浏览器、屏幕、网页高度宽度和定位DIV

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offse...

underA
2013/03/05
191
0
CSSOM View Module 中的尺寸与位置属性

指 CSS Object Model,即 CSS对象模型。CSSOM 是 JavaScript 操纵 CSS 的一系列 API 集合,它属是 DOM 和 HTML API 的附属。 其中视图模型(View Model)中定义了一系列接口,包括多个关于窗...

yinyongcom666
2016/03/28
16
0
js左移右移边距问题

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.bod...

前端_牛牛
2016/04/29
96
0

没有更多内容

加载失败,请刷新页面

加载更多

ES6

ES6:不改变原理的基础上,让API变得更简单 一、let:代替var用于声明变量 1、var的缺点: (1)声明提前 (2)没有块级作用域 2、let的优点: (1)组织了申明提前 (2)让let所在的块({}),...

wytao1995
今天
3
0
kubernetes 环境搭建 —— minikube

创建集群 minikube start 搭建好 k8s 集群后,可以查看集群的状态以及部署应用。主要用到的是 k8s 的 api,这通常需借助于 kutectl 命令行工具 基本操作 kubectl versionkubectl cluster-i...

lemos
今天
9
0
关于js混淆与反混淆还原操作

使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密,或者混淆js来达到代码保护。 1、为什么...

开源oschina
今天
11
0
用盛金公式解三次方程(ansi c版)

/* cc cubic.c -lm gcc cubic.c -lm Shengjin's Formulas Univariate cubic equation aX ^ 3 + bX ^ 2 + cX + d = 0, (a, b, c, d < R, and a!= 0). Multiple root disc......

wangxuwei
今天
9
0
JBolt开发平台入门(16)- 弹出Dialog显示指定区域的html内容

在JBolt里,有个主从表Demo。 子表中除了普通的table显示,还有其它从表显示形式 比如下方案例:是针对一个升级管理子表中存放版本的changelog富文本信息。 需求是点击左上角的弹出查看按钮,...

山东-小木
今天
46
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部