使用Javascript設置UL的CSS Left屬性

Question

因此，我正在嘗試使學校的導航欄更加移動友好。 如果您在移動設備上導航至www.jpc.wa.edu.au，然后單擊菜單項“資源”，則將打開一個下拉菜單，其中有兩個選項。 將這些鼠標懸停在台式計算機上，可以在第一個菜單的右側找到另一個菜單。 在大屏幕上可以正常工作。 但是，任何分辨率低於大約1460px的東西，例如大多數平板電腦，手機甚至是筆記本電腦，都會中斷新菜單，您必須向左平移窗口才能查看它。 我想通過在較小的屏幕上簡單地將第二個子菜單放在第一個子菜單的左側來完全避免此問題。 確定我可以做的屏幕尺寸。

if(window.innerWidth<1460)

工作完美。 我遇到的問題是，我似乎無法訪問第二個子菜單的left屬性來從我的JavaScript修改菜單位置

在我的CSS中，我使用以下選擇器進行設置

#horizonMenu

但是當我嘗試在Javascript中使用以下選擇器時

document.querySelector("#horizonMenu").style.left

但這似乎沒有返回任何值。

我在做錯人嗎？ 還是我應該采取完全不同的策略來解決此問題？

編輯：現在我已經將horizo​​nMenu更改為一個類。 las，我的問題似乎仍然存在:(

Answer 1

style屬性是的代表性style屬性。 由於要在CSS文件中設置CSS屬性，因此left屬性將返回一個空字符串。 style對象的屬性也不會顯示計算值。 為了獲得計算值，您應該使用window.getComputedStyle()函數。

window.getComputedStyle(document.querySelector("#horizonMenu"), null)
      .getPropertyValue('left')

要設置屬性值，您可以編寫以下代碼：

document.querySelector("#horizonMenu").style.left = '...';

請注意，您可以考慮使用CSS媒體查詢而不是使用JavaScript。

Answer 2

問題是您的ID包含多個元素Horizo​​nMenu。 您應該只有一個具有給定ID的元素。 當您查詢#horizo​​nMenu時，它返回的是Community-> Pastoral Care菜單，該菜單沒有左值。 您應該改用類，因為您可以讓多個元素共享一個類，或者將id更改為唯一的名稱，以便可以訪問要訪問的內容。

Answer 3

看一下以下鏈接

使用JavaScript和http://www.kirupa.com/html5/setting_css_styles_using_javascript.htm 更改元素的類

另外，請檢查元素的position屬性，請參見以下示例： https : //jsfiddle.net/masoodalam78/e3erq6j4/

var elementObj = document.querySelector("#menu");
elementObj.style.backgroundColor = "blue";
elementObj.left = "200px";

Answer 4

好的。 因此這可能是幾件事的結合。

1. 我按照JBzd的建議將菜單更改為一個類。

2. 我也停止使用querySelector（），而是使用querySelectorAll（）-將返回的內容存儲為變量，並使用varaible [1]和variable [2]訪問正確的菜單

3. 現在，我可以使用來訪問菜單的left屬性

    variable[x].style.left = '162px' 

謝謝各位的幫助 ：）