获取HTML元素大小 [英] Get HTML element size

问题描述

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

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

这里是我的示例

据我所知，我得到0大小因为这些属性独立于它的子元素引用元素，而我的容器有0,0大小，对吗？我读过，如果我设置 display：inline-block; 样式，它会调整大小以自动匹配其子元素 - 为什么这不起作用？

解决方案

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

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

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

我建议您打开开发工具元素检查器，并开始查看当您将位置从绝对更改为相对时的反应情况。

了解如何定位元素以及如何使用CSS来影响宽度/高度将为您节省许多麻烦 - 就像您现在拥有的那样：）

I spend couple of hours to try to get width of my div container. I read many questions and answers but none of them seem to work in my case - I always got 0. Finally I found that I can get it through scrollWidth property which wasn't even mentioned in this question and similar. Now I have what I wanted by I still have no idea how this works.

Why all the other methods fail? Why this is named scrollWidth? I don't want to scroll anything - it's so confusing. Can I get the size of an element before I append it to a document - even scrollWidth don't work in that case. Is there any model I should follow to always get what I see on the screen? I can't see any patterns right now, I write someting, see something different on the screen, and get something even more different in the output. Every time I want to do someting it seem to be 10 different methods I can use but usually only one or two work because it depends on which methods I used earlier. When i work with 2d graphics I used to have x,y,width and height but in html I allways got those smarty CSS which seem to know better what I want to do. Sorry if this sound a little officious but I'm a little annoyed when i need to spend so much time on a trivial task like this. I use to draw graphic on canvas and it was much simpler but now I want to make a simple website so it's probably not a good idea to build it this way.

Here is my example

I understand that i get 0 size becouse those properties refer to element independently of its children and my container has 0,0 size, right? I read that if I set display: inline-block; style it will adapt size to match its children automatically - why this in not working?

解决方案

The container element in fact has no width. This is why you are getting widths of zero. You can see this if you use dev tools element inspector.

The reason for it being that the container element is absolutely positioned and has no set width. Your child elements are also position: absolute and therefore they will not force the container element to 'grow' to their size.

To get the visible width of the menu, instead you could total up the widths of all the child elements (the first-level menu items). This is probably the best approach to use for the way you currently have things set up. Otherwise, I would suggest completely changing your approach with the html elements you are using, to the CSS properties you are using to position elements where it would not be required to use position: absolute.

I would advise you to open up your dev tools element inspector and start looking at how things react when you change the position from 'absolute' to 'relative'.

Understanding how to position elements and how widths/heights are affected using CSS will save you a lot of headaches - like the one you are having now :)

这篇关于获取HTML元素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！