zoukankan      html  css  js  c++  java
  • scrollLeft,scrollWidth,clientWidth,offsetWidth,screen.width全解析(转帖)

    IE和FF通用部分:
    有关document.documentElement和document.body.区别,请参考:
    http://hi.baidu.com/traindiy/blog/item/8d4bdaa27de4f0aacaefd070.html有助于理解以下内容。不过在实测中,可以理解为document.documentElement可以理解为浏览器的可见窗口区域,而body则仅为内容区域。

    1、window.screen.width (.height) 显示器大小(IE和FF通用): 1440 * 900 --> 和浏览器是否全屏无关

    2、document.documentElement.clientHeight /clientWidth: 浏览器可视窗口大小(IE和FF通用):该值不受样式表制约,只会随浏览器窗口大小变化。这和document.body.clientWidth 不一样。
    3、document.body.clientHeight : 文档高度(IE和FF通用):和上面一样,只是取值对象改为BODY,当BODY中无内容时,IE下为18,FF为0.当有内容时,则IE值=FF值,此值和BODY中的内容有关,是所有元素高度的总和
    4、document.body.clientWidth : 文档宽度(IE和FF通用,FF会比IE取得值多2PX左右):如IE 1440,FF:1442,此值和BODY中内容无关,但和样式有关,如在样式定义body{98px},则此值为98,当浏览器大小改变时,如不是全屏,此值也会跟着变化。

    3、document.documentElement.scrollLeft/scrollTop :页面滚动后的左侧/顶端位置(IE和FF通用)。
    4、document.documentElement.scrollHeight / scrollWidth : 获取对象的滚动高/宽度(IE和FF通用但有差别) IE/FF差别在于当body总高度小于浏览窗口可见区高度时,IE的scrollHeight值为body实际高度,而FF为浏览器可见区的高度。如果body高度大于浏览器可见区,则二者没什么差别。


    5、document.documentElement.offsetHeight / offsetWidth : 获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的宽/高度.(和上面功能类似且IE/FF通用,但差别正好相反) offsetHeight是指浏览器可见区的高度,而offsetWidth是指浏览器宽度,差别在于当body总高度低于浏览窗口可见区高度时,IE的offsetHeight值仍为浏览器可见区的高度,而FF为body实际高度。如果body高度大于浏览器可见区,则二者没什么差别。
    注、document.body.offsetHeight 和 document.body.offsetWidth :这对和上面不同,对象为body,在FF/IE下的值都是body的高和宽。不受浏览器可视区影响。
    另外,当CSS有对BODY的宽做限制时,这时如果页面有一个div的宽超过这个值,则IE的document.body.clientWidth和offsetWidth等于那个DIV的宽,但FF则仍然保留CSS中对body宽界定的值。

    并且要注意的是:如果没有在CSS中对body定义了 body{margin:0px;1239px},而这时有一个div的值超过了屏幕大小,比如1600px;那么在IE 中,document.body.offsetWidth/clientWidth或用document.documentElement等等都可以取到 body实际宽值为那个DIV的宽度,而FF则不论用什么,body值都是浏览器可视区的大小,不会按那个div的宽来计算。
    这时要用document.documentElement.scrollWidth(不能用body)来做为文本的宽度测量。而浏览器的可视宽度测量用document.documentElement.clientWidth。如下:

    function BrowserAndIEwidth()   {
    var str2=''

    bodyWidth = document.documentElement.scrollWidth   //这里不能用document.body.
    BrowserWidth = document.documentElement.clientWidth

    str1 = ' BODY的实际宽度 = ' +bodyWidth+',浏览器可视宽度 = '+BrowserWidth

    if (bodyWidth>BrowserWidth){
       str2 = 'body超过了浏览器的宽度!'
    }

    alert(str1+'\n'+str2);
    }
    //此函数在IE下当body内容未超范围时,并且用overflow="auto"设置过后,取值会不准。

    或者分开取值更好:如下函数即为取得当前页面的高度:
    function(){
            if (window.innerHeight && window.scrollMaxY) {   //FF
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight){ //IE
                yScroll = document.body.scrollHeight;
            } else {yScroll = document.body.offsetHeight;}
            return yScroll;
    }

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

    以下仅为IE或FF部分适用:

    8、window.pageXOffset/pageYOffset: 页面滚动后的顶端位置(仅FF适用,建议用document.documentElement.scrollLeft/scrollTop)。
    9、window.innerWidth /innerHeight: 浏览器可视区的大小,即不含浏览器菜单、工具栏(仅FF适用,建议用document.documentElement.clientHeight),改变浏览器大小,此值也会改变
    10、event.offsetY / .offsetX :(仅IE适用)光标指针相对于发生事件的对象的左上角的位置,也就是把事件发生区的DIV或TABLE等元素左上角当做坐标的0,0开始计算。
    11、event.clientX / .clientY :(仅IE适用)与offsetX不同,clientX是从body窗口左上角开始计算。
    12、在IE下的 event.x 等于FF中的event.pageX
    13、window.scrollMaxX /window.scrollMaxY :
    最大可滚动的值。仅FF可用。

    应用举例:

    1、当body的宽度没有受CSS样式表限制时,如没有规定body{863px}:则
    document.body.clientWidth = document.documentElement.scrollWidth
    反之当有限制时,则IE的document.documentElement.scrollWidth仍然等于document.body.clientWidth,但FF则document.documentElement.scrollWidth=浏览器窗口可视区的大小,只有用document.body.scrollWidth才能相等。也可以看出两种浏览器对容器的定义不同。

  • 相关阅读:
    Spring Boot (20) 拦截器
    Spring Boot (19) servlet、filter、listener
    Spring Boot (18) @Async异步
    Spring Boot (17) 发送邮件
    Spring Boot (16) logback和access日志
    Spring Boot (15) pom.xml设置
    Spring Boot (14) 数据源配置原理
    Spring Boot (13) druid监控
    Spring boot (12) tomcat jdbc连接池
    Spring Boot (11) mybatis 关联映射
  • 原文地址:https://www.cnblogs.com/jasonoiu/p/1768844.html
Copyright © 2011-2022 走看看