屏幕大小(IE和FF通用),window与document的这么些属性的值会不太合营

window与document的这些属性的值会不太兼容,可以理解为document.documentElement可以理解为浏览器的可见窗口区域


IE和FF通用部分: 有关document.documentElement和document.body.区别,请参考:http://hi.baidu.com/traindiy/blog/item/8d4bdaa27de4f0aacaefd070.html推进通晓以下内容。不过在实测中,可以清楚为document.documentElement能够精通为浏览器的可知窗口区域,而body则仅为情节区域。

window与document的这个属性的值会不太同盟,会在背后补充说。
眨眼之间间效率浮现忽略IE9从前浏览器,重要考虑主流浏览器与手机端的效果。

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

  • 可以收获宽度与中度的品质
  • clientHeight 与clientWidth 指成分的客户区大小,即
    可知内容区+padding

    #t1{
    width: 100px;
    height: 100px;
    border: 4px solid yellowgreen;
    background: yellow;
    padding: 10px;
    }

    div.clientWidth+’;’+div.clientHeight;

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{width:98px},则此值为98,当浏览器大小改变时,如不是全屏,此值也会跟着变动。

120=width(100)+padding(10)\*2;  
不加边框,当内容溢出或者出现滚动条时的宽度与高度都不会算在内。  
是dom对象的可见宽度,这里的可见是针对设置`overflow: scroll;`后部分内容隐藏而说的。

3、document.documentElement.scrollLeft/scrollTop
页面滚动后的左边/顶端地方(IE和FF通用)。
4、document.documentElement.scrollHeight / scrollWidth :
获取对象的滚动高/宽度(IE和FF通用但相差很大)
IE/FF差距在于当body总中度小于浏览窗口可知区高度时,IE的scrollHeight值为body实际中度,而FF为浏览器可知区的中度。尽管body高度超越浏览器可知区,则二者没什么差异。

  • offsetHeight与offsetWidth 是因素的外在大小,即 border
    +padding+可见内容区

    div.offsetWidth+’;’+div.offsetHeight

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宽界定的值。

128 = width(100)+padding(10)*2+border(4)*2  
上图内容区溢出隐藏,是因为设置了`overflow: scroll;`才会有这样的现象。

并且要专注的是:如若没有在CSS中对body定义了
body{margin:0px;width:1239px},而此刻有一个div的值当先了显示器尺寸,比如1600px;那么在IE
中,document.body.offsetWidth/clientWidth或用document.documentElement等等都足以取到
body实际宽值为那么些DIV的增幅,而FF则不论用什么样,body值都以浏览器可视区的分寸,不会按那一个div的宽来测算。
此刻要用document.documentElement.scrollWidth(不只怕用body)来做为文本的幅度测量。而浏览器的可视宽度测量用document.documentElement.clientWidth。如下:

  • scrolWidth与scrollHeight是因素的实际尺寸,即
    实际内容区+padding

    div.scrollWidth+’;’+div.scrollHeight

function BrowserAndIEwidth()   {
var str2=”

以上那三对性能都以针对dom成分的,可以测得元素的升幅,不过,细心的会发觉,以上三种并不曾提供拿到width(100)的法门,所以可以拔取window.getComputedStyle(div,null).getPropertyValue('width');
那般得到就是100。

bodyWidth = document.documentElement.scrollWidth  
//那里不可以用document.body.
BrowserWidth = document.documentElement.clientWidth


str1 = ‘ BODY的实际上增幅 = ‘ +bodyWidth+’,浏览器可视宽度 =
‘+BrowserWidth

实则正如难了解的是像window、document.body、document.
documentElement那七个dom对象在赢得他们的宽度时会有各样难题。
到现在始于撕一下那个中的神奇。。。

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

  • document.body与document. documentElement
    前端是body,后者是html。可是以往大家都习惯将元素专擅认同的padding与margin设置为0,这样无论通过上述二种哪个人去访问clientWidth都以同样的值(电脑端一致)。
    然则手机端访问那八个值的时候会趁机由于是客户端,我们会对网页的meta标签做一些装置,然后通过那多少个目的访问的属性的值就差别。然则由于body是html的子标签,所以博得可视窗口(clientWidth)的高低,提出使用后者document.
    documentElement.clientWidth。

alert(str1+’\n’+str2);
}
//此函数在IE下当body内容未超限量时,并且用overflow=”auto”设置过后,取值会禁止。

document对象有脾天性compatMode ,它有三个值:
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
IE6从前的浏览器就是率先种渲染形式,导致IE6要是想拿到可视窗口(clientWidth)时,必须选择document.body.clientWidth那一个来走访。IE6我实习的信用社一度扬弃啊。

抑或分开取值更好:如下函数即为取得当前页面的中度:
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;
}

综上:抛弃document.body的用法,使用document. documentElement。
  • window.innerWidth与document.
    documentElement.clientWidth用哪个?

    收受来说的是不为网页添加meta标签的法力,添加标签的本身觉着应该别的写一篇,因为会涉及到自适应的知识。
    自我做了再安卓机浏览器,黑莓的safari浏览器以及那二种无绳电话机内微信内访问网页运行的qq浏览器的测试。
    测试结果必然是不合并的。
    测试前提:不为页面设置固定的涨幅,不安装meta标签。
    测试结果:
属性 安卓机 iphone
window.innerWidth 980px 980px
..clientWidth 980px 980px
属性 安卓机微信 iphone微信
window.innerWidth 320px 980px
..clientWidth 980px 980px

老是会有捣蛋鬼。。。
综上:借使想要拿到手机端页面的可视宽度,指出选取
document. documentElement.clientWidth

在下一篇,笔记中,会对这天性格在meta标签的不比设置下的值举行解析。

BTW:我又重返,好好学习啦!

 

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{width:863px}:则
document.body.clientWidth = document.documentElement.scrollWidth
反之当有限定时,则IE的document.documentElement.scrollWidth如故出色document.body.clientWidth,但FF则document.documentElement.scrollWidth=浏览器窗口可视区的轻重,只有用document.body.scrollWidth才能等于。也足以见见三种浏览器对容器的概念不相同。