获取HTML元素大小

我花了几个小时尝试获取div容器的宽度。我读了很多问题和答案，但他们似乎没有在我的情况下工作 - 我总是得到0.最后，我发现我可以通过scrollWidth财产得到它甚至没有在this问题和类似问题中提及。现在我有我想要的东西，我仍然不知道这是如何工作的。获取HTML元素大小

为什么所有其他方法失败？为什么这被命名为scrollWidth？我不想滚动任何东西 - 它很混乱。在将它追加到文档之前，我可以获取元素的大小 - 即使scrollWidth在这种情况下也不起作用。有没有我应该遵循的模式，以便始终获得我在屏幕上看到的内容？我现在看不到任何模式，我写了些东西，在屏幕上看到不同的东西，并在输出中获得更多不同的东西。每次我想做点什么时，似乎有10种不同的方法可以使用，但通常只有一两种方法可行，因为它取决于我以前使用的方法。当我用2D图形工作时，我曾经有x，y，宽度和高度，但是在html中，我总是得到那些聪明的CSS，它们似乎更好地知道我想要做什么。对不起，如果这听起来有点拙劣，但我有点恼火，当我需要花这么多时间在这样一个简单的任务。我用画布绘制图形，它更简单，但现在我想制作一个简单的网站，所以用这种方式构建它可能不是一个好主意。

这是我example

我明白，我得到0尺寸becouse这些属性是指元素独立于它的孩子和我的容器具有0,0的大小，对不对？我读到，如果我设置display: inline-block;样式，它会自动调整大小以匹配其子项 - 为什么这不起作用？

来源

2015-09-07 Paweł Audionysos

考虑。 – 2015-09-07 04:54:18

你看过例子吗？我实际测试过它，它不工作。 –

document.getElementById("mydiv").offsetWidth

这将返回宽度，包括填充。

来源

2015-09-07 00:43:52 Akjm

对不起，这不是我的例子，但它不适用于我的情况。 –

容器元素实际上没有宽度。这就是为什么你得到零的宽度。你可以看到这个，如果你使用开发工具元素检查器。

其原因是容器元素是绝对定位的，没有设置宽度。您的子元素也是position: absolute，因此他们不会强制容器元素“增长”到其大小。

要获得菜单的可见宽度，可以将所有子元素（第一级菜单项）的宽度加起来。这可能是最好的方式来使用您目前设置的方式。否则，我会建议完全改变你正在使用的HTML元素的方法，你正在使用的CSS属性来定位不需要使用position: absolute的元素。

我建议你打开你的开发工具元素检查器，并开始查看当你将位置从“绝对”改变为“相对”时事物的反应。

了解如何定位元素和宽度/高度是如何使用CSS会为你节省很多头痛的影响 - 使用`element.getClientBoundingRect`一样，你现在有:)

来源

2015-09-07 01:38:34

其实我想要做的是找到正确的方法来做这样的事情，我现在不觉得任何这些事情。事情是我根本不想使用CSS或者将它限制到最小。如果你想制作真正基本的静态页面，那么CSS可能会有帮助，但如果我想要制作一些动画呢？我知道CSS动画，但显然它们有局限性，我不喜欢被束缚。另一个原因是它很混乱。我阅读https://developer.mozilla.org/en-US/docs/Web/CSS/position它说什么，你说什么？ –

我是否真的需要运行一系列测试才能找出工作原理？另外，我没有看到逻辑 - 为什么定位方法会影响容器的大小，这是两个完全不同的东西。我必须成为一名先知，不要以困难的方式学习它。这整个想法对我来说似乎是错误的。 –

嗨，Pawel，如果你不想使用CSS，那么很抱歉把它分解给你，那么我认为前端Web开发并不适合你......要理解javascript，HTML和CSS的工作原理一起是关键。他们都齐头并进，这取决于你如何把他们放在一起，并理解他们的每一个优点。如果我们都可以在不学习的情况下理解所有东西，那么我们都将成为天才！除非我们在矩阵中像Neo一样，我们可以通过将技能下载到自己来学习柔术...... –

获取HTML元素大小

回答

相关问题