zoukankan      html  css  js  c++  java
  • DOCTYPE声明对JS获取窗口宽度和高度的影响

    在没有DOCTYPE声明的情况下:

    document.body.clientWidth

    document.body.clientHeight

    为当前窗口的宽度/高度;

    在DOCTYPE声明以后

    document.body.clientWidth

    document.body.clientHeight

    为整个页面的宽度/高度;

    document.documentElement.clientWidth

    document.documentElement.clientHeight

    为当前窗口的宽度/高度;

    同样增加DOCTYPE声明后

    document.body.scrollLeft

    document.body.scrollTop

    要改为

    document.documentElement.scrollLeft

    document.documentElement.scrollTop


    注意保存时,文件的编码要看好,有时会出现脚本错误,是因为编码的格式问题,如GB2312

    ------------------------------------------------------------------

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到 document.body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用 document.documentElement来取代document.body,可以这样写
    例:
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    在javascript里||是个好东西,除了能用在if等条件判断里,还能用在变量赋值上。那么上例等同于下例。
    例:
    var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    这么写可以得到很好的兼容性。


    ---------------------------------------------------
    JS获取浏览器窗口巨细 获取屏幕,浏览器,网页高度宽度

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


    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
    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均无关)

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


    -------------------

    技术要点
    本节源代码主要使用了Document东西关于窗口的一些属性,这些属性的主要效用和用法如下。

    要得到窗口的尺寸,对付差别的浏览器,需要使用差别的属性和要领:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注重根元素的尺寸,而不是元素。

    Window东西的innerWidth属性包括当前窗口的内部宽度。Window东西的innerHeight属性包括当前窗口的内部高度。

    Document东西的body属性对应HTML文档的标签。Document东西的documentElement属性则体现HTML文档的根节点。

    document.body.clientHeight体现HTML文档所在窗口确当前高度。document.body. clientWidth体现HTML文档所在窗口确当前宽度。

    实现源代码

    <!------------------------------文件 名:30.3.htm------------------------------><!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><meta http-equiv="content-type" content="text/html; charset=gb2312"></head><body><h2 align="center">请调解浏览器窗口巨细</h2><hr><form action="#" method="get" name="form1" id="form1"><!--显示浏览器窗口的实际尺寸-->浏览器窗口的 实际高度: <input type="text" name="availHeight" size="4"><br>浏览器窗口 的实际宽度: <input type="text" name="availWidth" size="4"><br></form><script type="text/javascript"><!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测,获取窗口巨细 if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //结果输出至两个文本框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //挪用函数,获取数值 window.onresize=findDimensions;//--></script></body></html>
    源程序解读

    (1)程序首先建立一个表单,包括两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口巨细的转变而转变。

    (2)在随后的JavaScript源代码中,首先界说了两个变量winWidth和winHeight,用于留存窗口的高度值和宽度值。

    (3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者留存在前述两个变量中。

    (4)再通过深入Document内部对body进行检测,获取窗口巨细,并存储在前述两个变量中。

    (5)在函数的最后,通过按名称访问表单位素,结果输出至两个文本框。

    (6)在JavaScript源代码的最后,通过挪用findDimensions ( )函数,完成整个操纵。

  • 相关阅读:
    中国大概可用NTPserver地址
    ROOT android 原则。 基于(zergRush)
    Struts2他们拦截器实例定义—登陆权限验证
    引用与指针
    address_space 从哪里来
    C++ 可以多个函数声明
    linux下远程管理利器-tmux
    内核空间和用户空间的分界 PAGE_OFFSET
    io端口
    C中程序的内存分配
  • 原文地址:https://www.cnblogs.com/colder/p/2284654.html
Copyright © 2011-2022 走看看