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

但这似乎并没有带来任何价值。

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

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

Answer 1

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

Answer 2

查看以下链接

更改元素'；s类，带有JavaScript和http://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

此外，请检查元素的位置属性，请参见以下示例：https://jsfiddle.net/masoodalam78/e3erq6j4/

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

Answer 3

style属性是style属性的表示。由于要在CSS文件中设置CSS属性，因此left属性将返回一个空字符串。此外，style对象的属性不会显示计算的值。为了获得计算值，您应该使用window.getComputedStyle()函数。

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

为了设置属性值，您可以编码：

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

请注意，您可以考虑使用CSS媒体查询，而不是使用JavaScript。

Answer 4

好的。所以这可能是一些事情的结合。

1. 我听从JBzd的建议，将菜单更改为类。

2. 我也停止使用querySelector()，而是使用querySelectorAll()-将返回的内容存储为变量，并使用varible[1]和variable[2]访问正确的菜单

3. 我现在可以使用访问菜单的左侧属性

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

感谢大家的帮助：)