我花了几个小时试图获得我的div容器的宽度。我读了许多问题和答案,但似乎没有一个在我的情况下工作 - 我总是得到0.最后我发现我可以通过scrollWidth
属性获得它,而{{3}中甚至没有提到它问题和类似。
现在我有我想要的东西,我仍然不知道它是如何工作的。
为什么所有其他方法都失败了?为什么将其命名为scrollWidth
?我不想滚动任何东西 - 它太混乱了。我可以在将其附加到文档之前获取元素的大小 - 在这种情况下,甚至scrollWidth也不起作用。是否有任何模型我应该遵循以始终获得我在屏幕上看到的内容?我现在无法看到任何模式,我会写一些东西,在屏幕上看到不同的东西,并在输出中获得更多不同的东西。每次我想做某事时,它似乎是我可以使用的10种不同的方法,但通常只有一两个工作,因为它取决于我之前使用的方法。当我使用2D图形时,我曾经有x,y,宽度和高度,但在html中我总是得到那些聪明的CSS,似乎更清楚我想做什么。对不起,如果这听起来有点苛刻,但是当我需要花费这么多时间来处理这样一个微不足道的任务时,我有点恼火。我用它在画布上绘制图形并且它更简单但现在我想建立一个简单的网站,所以以这种方式构建它可能不是一个好主意。
这是我的this
我明白我得到0大小因为那些属性独立于其子元素引用元素而我的容器有0,0大小,对吧?我读到,如果我设置display: inline-block;
样式,它会调整大小以自动匹配其子项 - 为什么这不起作用?
答案 0 :(得分:2)
容器元素实际上没有宽度。这就是为什么你的宽度为零。如果使用开发工具元素检查器,则可以看到这一点。
原因是容器元素是绝对定位的并且没有设置宽度。您的子元素也是position: absolute
,因此它们不会强制容器元素“生长”。他们的大小。
要获得菜单的可见宽度,您可以总计所有子元素(第一级菜单项)的宽度。这可能是您目前设置方式的最佳方法。否则,我建议您使用正在使用的html元素完全改变您的方法,使用CSS属性来定位不需要使用position: absolute
的元素。
我建议你打开你的开发工具元素检查员,然后开始考虑当你改变绝对的位置时事情的反应。到相对的#39;
了解如何使用CSS定位元素以及如何影响宽度/高度将为您节省很多麻烦 - 就像您现在拥有的那样:)
答案 1 :(得分:0)
document.getElementById("mydiv").offsetWidth
这将返回宽度,包括填充。