JS中得各种宽度,JS获取屏幕宽度


document.write(
"显示器分辨率为:"+screen.width+"*"+screen.height
+"<br />"+
"显示屏可用大小:"+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可知区域宽:"+document.body.clientWidth
+"<br />"+
"网页可知区域高:"+document.body.clientHeight
+"<br />"+
"网页可知区域宽(包罗边线的宽):"+document.body.offsetWidth 
+"<br />"+
"网页可知区域高(包罗边线的宽):"+document.body.offsetHeight 
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft
+"<br />"+
"网页正文部分上:"+window.screenTop
+"<br />"+
"网页正文部分左:"+window.screenLeft
+"<br />"+
"显示屏分辨率的高:"+window.screen.height
+"<br />"+
"荧屏分辨率的宽:"+window.screen.width
+"<br />"+
"显示器可用工作区中度:"+window.screen.availHeight
+"<br />"+
"荧屏可用工作区宽度:"+window.screen.availWidth
);

window与document的这个属性的值会不太合营,会在末端补充说。
一须臾职能展现忽略IE9在此之前浏览器,主要考虑主流浏览器与手提式无线电话机端的效果。

  • 能够博得宽度与中度的习性
  • clientHeight 与clientWidth 指元素的客商区大小,就可以知内容区+padding
    #t1{
    width: 100px;
    height: 100px;
    border: 4px solid yellowgreen;
    background: yellow;
    padding: 10px;
    }

    div.clientWidth+';'+div.clientHeight;

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

    div.offsetWidth+';'+div.offsetHeight

128 = width(100)+padding(10)*2+border(4)*2  
上图内容区溢出隐藏,是因为设置了`overflow: scroll;`才会有这样的现象。
  • scrolWidth与scrollHeight是因素的莫过于尺寸,即 实际内容区+padding

    div.scrollWidth+';'+div.scrollHeight

以上那三对质量都以指向dom成分的,能够测得成分的增长幅度,可是,留意的会意识,以上两种并未提供获得width(100)的格局,所以能够采纳window.getComputedStyle(div,null).getPropertyValue('width');
如此那般获得正是100。


实则正如难掌握的是像window、document.body、document. documentElement那三个dom对象在得到他们的小幅时会有种种难点。
后日开始撕一下那在这之中的神奇。。。

  • document.body与document. documentElement
    前端是body,后面一个是html。不过以往大家都习于旧贯将成分暗中认可的padding与margin设置为0,那样无论通过以上二种哪个人去探问clientWidth都以一样的值(Computer端一致)。
    可是手提式有线电话机端访谈那多少个值的时候会随着由于是客商端,大家会对网页的meta标签做一些装置,然后经过那多少个指标访谈的性质的值就不同。但是由于body是html的子标签,所以获得可视窗口(clientWidth)的尺寸,提出利用后面一个document. documentElement.clientWidth。

document对象有个属性compatMode ,它有八个值:
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
IE6从前的浏览器正是首先种渲染方式,导致IE6假如想得到可视窗口(clientWidth)时,必得采纳document.body.clientWidth这些来拜会。IE6小编实习的公司已经放任啊。

综上:抛弃document.body的用法,使用document. documentElement。
  • window.innerWidth与document. documentElement.clientWidth用哪个?
    收到来说的是不为网页增多meta标签的效劳,增加标签的自个儿认为应该别的写一篇,因为会涉嫌到自适应的知识。
    本人做了再安卓机浏览器,Motorola的safari浏览器以及那三种手提式有线电话机内微信内访问网页运营的qq浏览器的测量检验。
    测量试验结果确定是不联合的。
    测量试验前提:不为页面设置固定的升幅,不安装meta标签。
    测量试验结果:
属性 安卓机 iphone
window.innerWidth 980px 980px
..clientWidth 980px 980px
属性 安卓机微信 iphone微信
window.innerWidth 320px 980px
..clientWidth 980px 980px

三番两次会有调皮鬼。。。
综上:借使想要得到手提式无线电话机端页面包车型客车可视宽度,提议使用
document. documentElement.clientWidth

在下一篇,笔记中,会对那么些个性在meta标签的分化设置下的值实行剖释。

BTW:小编又赶回,好好学习啦!

本文由明仕msyz手机版发布于家居装修-蜗牛装饰,转载请注明出处:JS中得各种宽度,JS获取屏幕宽度

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。