永利皇宫手机版网址JS中得各种宽度

时间:2019-11-21 05:02来源:永利皇宫手机版网址
window与document的这些属性的值会不太兼容,会在后面补充说。 永利皇宫手机版网址JS中得各种宽度。一下效果展示忽略IE9之前浏览器,主要考虑主流浏览器与手机端的效果。 可以获得宽

window与document的这些属性的值会不太兼容,会在后面补充说。
永利皇宫手机版网址JS中得各种宽度。一下效果展示忽略IE9之前浏览器,主要考虑主流浏览器与手机端的效果。

  • 可以获得宽度与高度的属性
  • clientHeight 与clientWidth 指元素的客户区大小,即 可见内容区+padding
    #t1{
    width: 100px;
    永利皇宫手机版网址JS中得各种宽度。height: 100px;
    永利皇宫手机版网址JS中得各种宽度。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都是一样的值(电脑端一致)。
    但是手机端访问这两个值的时候会随着由于是客户端,我们会对网页的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标签的效果,添加标签的我觉得应该另外写一篇,因为会涉及到自适应的知识。
    我做了再安卓机浏览器,iPhone的safari浏览器以及这两种手机内微信内访问网页运行的qq浏览器的测试。
    测试结果肯定是不统一的。
    测试前提:不为页面设置固定的宽度,不设置meta标签。
    测试结果:
属性 安卓机 iphone
window.innerWidth 980px 980px
..clientWidth 980px 980px
属性 安卓机微信 iphone微信
window.innerWidth 320px 980px
..clientWidth 980px 980px

总是会有捣蛋鬼。。。
综上:如果想要获得手机端页面的可视宽度,建议使用
document. documentElement.clientWidth

在下一篇,笔记中,会对这个属性在meta标签的不同设置下的值进行分析。

BTW:我又回来,好好学习啦!

编辑:永利皇宫手机版网址 本文来源:永利皇宫手机版网址JS中得各种宽度

关键词: