獲取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元素大小

回答

相關問題