请问如何用原生 javascript 获取元素内容的宽度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3120 天前的主题，其中的信息可能已经有所发展或是发生改变。

也就是 jquery 里的 width() 的原理，不包括 margin , padding , border 的宽，仅仅获取 content 的 width 和 heigth.

19 条回复 • 2016-05-08 20:07:58 +08:00

finian

2016-05-07 14:07:52 +08:00

看 jQuery 源码呗

newbieo0O

2016-05-07 14:11:56 +08:00

学好基本功。多实验就知道了。

jame

2016-05-07 14:21:47 +08:00

Element.getBoundingClientRect()
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

learnshare

2016-05-07 14:40:11 +08:00

https://github.com/LearnShare/blog/blob/master/posts/images/position-and-size-element.png

maomaomao001

2016-05-07 14:45:27 +08:00 via Android

@newbieo0O 各种 width 都试过了，不行才问的～

@jame 这个当然试了，结果在最新版的谷歌里包含 padding+ border

maomaomao001

2016-05-07 15:05:38 +08:00

@jame
@learnshare

要不是试过很多种方法，我不会在 v 站求助的~~~
<img src="http://i2.buimg.com/9890d1546976cdd1.png">

<img src="http://i2.buimg.com/9a6f2e72565ac65d.png">

<img src="http://i2.buimg.com/7e02239c8942d84f.png">

learnshare

2016-05-07 15:09:03 +08:00

@maomaomao001 为什么要计算表格单元格的尺寸？

maomaomao001

2016-05-07 15:18:00 +08:00

@jame
@learnshare

要不是试过很多种方法，我不会在 v 站求助的~~~

maomaomao001

2016-05-07 15:19:26 +08:00

@learnshare 因为，我需要把表格的第一列一像素不差的复制到新表格里作为固定表头。

maomaomao001

2016-05-07 15:20:54 +08:00

错了，是第一行!

learnshare

2016-05-07 15:25:05 +08:00

@maomaomao001 Try http://mkoryak.github.io/floatThead/

learnshare

2016-05-07 15:27:27 +08:00

@maomaomao001 Or http://maslianok.github.io/stickyRows/default.html

sox

2016-05-07 15:28:11 +08:00

https://github.com/oneuijs/You-Dont-Need-jQuery#2.2

maomaomao001

2016-05-07 15:38:50 +08:00

@learnshare 这个依赖 jq 不说，手机上直接跪了~~~

@sox 就是这个...找了半天.谢谢大神!

jame

2016-05-08 15:18:09 +08:00

这东西要跟 box-sizing 合着用的。多看看基础你就会明白了。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

maomaomao001

2016-05-08 17:00:17 +08:00 via Android

@jame 好难啊～～好不容易兼容了谷歌,ie10 火狐，安卓和苹果～～～没想到微信有个自己的内核又各种不兼容了...

jame

2016-05-08 17:10:01 +08:00

如果你用了 viewport ，这东西确实对 positon: fixed 支持不好的

可以试试 position: stricky;
see https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

或者去掉 viewport ，使用 hotcss
https://github.com/imochen/hotcss

jame

2016-05-08 17:11:46 +08:00

修正，目前 viewport 对 fixed 有比较好的支持了，只是 onscroll 不会实时刷新。一般可以使用 touchmove 来代替。但是表现也不是很理想。

maomaomao001

2016-05-08 20:07:58 +08:00

@sox 不不不，这个不兼容火狐浏览器~~~~崩溃了。。。