使用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' 

谢谢各位的帮助 ：）