使用Javascript设置UL的CSS Left属性

所以我想让我的学校导航栏更便于移动。 如果您导航到 www.jpc.wa.edu.au 在移动设备上，单击菜单项“资源”-将打开一个下拉菜单，其中有两个选项。用台式电脑将鼠标移到这些菜单上，会在第一个菜单的右侧显示另一个菜单。这在大屏幕上运行良好。然而，任何分辨率低于1460px的东西，比如大多数平板电脑、手机甚至笔记本电脑，新菜单都会被切断，你必须向左平移窗口才能查看它。我想通过简单地将第二个子菜单放置在较小屏幕上第一个子菜单的左侧来完全避免这个问题。 确定屏幕大小我可以做

if(window.innerWidth<1460)

但是当我尝试在Javascript中使用这个选择器时

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

但这似乎没有返回任何值

我做错了什么，伙计们？还是我应该采取完全不同的策略来解决这个问题

编辑：我现在已将horizonMenu更改为类。唉，我的问题似乎一直存在：

style属性是style属性的表示形式。因为您正在CSS文件中设置CSS属性，所以left属性返回一个空字符串。样式对象的特性也不显示计算值。要获得计算值，应使用函数

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

要设置属性值，可以编写以下代码：

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

注意，您可以考虑使用CSS媒体查询而不是使用JavaScript。p> 样式属性是样式属性的表示形式。因为您正在CSS文件中设置CSS属性，所以left属性返回一个空字符串。样式对象的特性也不显示计算值。要获得计算值，应使用函数

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

要设置属性值，可以编写以下代码：

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

---

注意，您可以考虑使用CSS媒体查询而不是使用JavaScript。p> 问题在于，ID菜单中有多个元素。您应该只有一个具有给定ID的元素。当您查询horizonMenu时，它将返回Community->Pastoral Care菜单，该菜单没有左值。您应该改为使用类，因为您可以让多个元素共享一个类，或者将id更改为唯一的，这样您就可以访问您想要访问的内容。

问题是，您的id菜单中有多个元素。您应该只有一个具有给定ID的元素。当您查询horizonMenu时，它将返回Community->Pastoral Care菜单，该菜单没有左值。您应该改为使用类，因为您可以让多个元素共享一个类，或者将id更改为唯一的，这样您就可以访问您想要访问的内容。

请查看以下链接

及

另外，请检查元素的位置属性，请参见以下示例：

---

请看以下链接

及

另外，请检查元素的位置属性，请参见以下示例：

---

好的。因此，这可能是一些因素的组合

我听从JBzd的建议，把菜单改成了一个类

我也不再使用querySelector，而是使用querySelectorAll—存储作为变量返回的内容，并使用varaible[1]和variable[2]访问正确的菜单

我现在可以使用

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

---

谢谢大家的帮助：

好的。因此，这可能是一些因素的组合

我听从JBzd的建议，把菜单改成了一个类

我也不再使用querySelector，而是使用querySelectorAll—存储作为变量返回的内容，并使用varaible[1]和variable[2]访问正确的菜单

我现在可以使用

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

---

谢谢大家的帮助：

我觉得把子菜单选项放在主选项下面比放在右/左更好看。我觉得把子菜单选项放在主选项下面比放在右/左更好看。我把horizonMenu改成了一个类，但我似乎仍然无法访问它的left属性：我已将horizonMenu更改为类，但似乎仍然无法访问它的left属性：这似乎可以用于返回left值。但是有没有类似的setProperty函数可以用来修改它呢？这似乎可以用来返回左边的值。但是有没有像setProperty这样的函数可以用来修改它呢？这些是我一直在尝试采用的策略。不幸的是，他们似乎也无法访问我需要的财产。var elementObj=document.querySelector.horizonemenu.left-应该返回水平菜单的left属性，现在是一个类-但是它返回unfinedt这些是我一直尝试使用的策略。不幸的是，他们似乎也无法访问我需要的财产。变量elementObj=document.querySe

---

left-现在应该返回水平菜单的left属性为class-但是它返回unfinedi，我也没有足够的声誉将其作为答案，也没有向帮助过我的人提供任何投票。对不起，伙计们：我也没有足够的声誉来回答这个问题，也没有向帮助过我的人投任何赞成票。对不起，伙计们：