显示屏大小(IE和FF通用),以上那三对品质都是指向dom成分的


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标签的功力,添加标签的本身认为应该别的写一篇,因为会波及到自适应的知识。
    小编做了再安卓机浏览器,HTC的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可用。

应用举例:

壹 、当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才能等于。也可以看出三种浏览器对容器的定义不一样。

 

相关文章

网站地图xml地图