Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

如何获取元素尺寸?

  看到这个标题也许很多人会想说为什么扯这种入门级的话题?获取元素尺寸确实是入门级的,因为获取元素尺寸本身确实用原生 DOM 的属性就可以搞定。但问题的关键在于「元素尺寸」指什么?border-box?padding-box?content-box?不得不感叹 Web 这个大坑货!
  「元素尺寸」这个概念太操蛋,元素上有各种盒子,究竟哪一个才是元素的尺寸呢?就像别人问我年龄,我每次都答不上,因为年龄的计算方式太多了,什么周岁、虚岁,概念太混乱了。于是我都只说我属羊,年龄自己猜去。
  其实比起年龄,「元素尺寸」已经是很简单的概念了。因为常用的盒子就三种 border-box、padding-box、content-box,我想应该也不会有什么 margin-box、outline-box、box-shadow-box 这么奇葩的概念吧?所以如果 DOM 有提供一套获取这三种盒子尺寸的相关属性就完美解决问题了。
  但是问题来了,DOM 就是不给提供这些盒子的尺寸获取方式,于是我就呵呵了。不过这也不能全怪 DOM,因为盒子模型是 CSS 的东西,它能把一个 offsetWidth 支持到这种程度已经很不错了,至少我们有一个靠谱的 border-box 获取方式可以用。
  其实除了 offsetWidth,还有比较纠结的 clientWidth 和 scrollWidth,它们是取 pdding-box,区别在于 clientWidth 无视滚动条,而 scrollWidth 会考虑滚动条。其实还好,只是感觉它们的名字有点奇怪而已。
  最纠结的问题在于 content-box,似乎没有任何属性可以直接获取元素的 content-box 尺寸,只能自己去计算。计算方式大概有两种。一种是判断元素的 box-sizing,如果是 content-box 的话就从 clientWidth 中减掉 padding 的宽度。另一种方式是创建一个子元素,设置宽度为 100%,再取其 offsetWidth。前一种方式的坑是低版本 IE 下很难获取到 padding 的宽度。后一种方式是子元素可能受后代选择器的影响。所以总是不能完美解决问题。
  最后我只想问,DOM 为何不提供原生的获取方式呢?或者大家有什么更好的方式可以分享下~~
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^