JS中得获取宽度的方法实例

---

window与document的这些属性的值会不太兼容，会在后面补充说。
一下效果展示忽略IE9之前浏览器，主要考虑主流浏览器与手机端的效果。

• 可以获得宽度与高度的属性

• clientHeight 与clientWidth 指元素的客户区大小，即 可见内容区+padding

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

  
  

  p.clientWidth+';'+p.clientHeight;

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

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

  
  

  p.offsetWidth+';'+p.offsetHeight

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

• scrolWidth与scrollHeight是元素的实际大小，即 实际内容区+padding

  
  

  p.scrollWidth+';'+p.scrollHeight

以上这三对属性都是针对dom元素的，可以测得元素的宽度，但是，细心的会发现，以上三种并没有提供获得width（100）的方法，所以可以使用window.getComputedStyle(p,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：我又回来，好好学习啦！

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程

Atas ialah kandungan terperinci JS中得获取宽度的方法实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!