Javascript CSS与内联！重要的

这是我的网站：

它通过几个媒体查询和一个由javascript支持的移动菜单按钮来响应

以下是菜单按钮的javascript：

function toggleMenu () {
    if (menuIsVisible == false) {
        collapsibleMenu.style.height = 'auto';
        content.style.paddingTop = '290px';
        menuIsVisible = true;
    }
    else {
        collapsibleMenu.style.height = '0';
        content.style.paddingTop = '80px';
        menuIsVisible = false;
    }
}

因此，您可以看到，我需要调整content div顶部的填充，以偏移菜单

但是如果调整到手机大小，打开菜单，然后重新调整到桌面大小，则填充不会被媒体查询修复，因为javascript中仍然存在内联样式。我试着在桌面版上做填充！重要的是，它的填充仍然不会改变大小时，即使根据！重要的节拍

您可以自己测试，方法是打开大小（外观），调整到移动宽度（导航将消失，您将看到菜单按钮），单击菜单按钮（保持菜单打开），然后将站点调整回桌面宽度。你会看到填充物还在那里。如果您检查它，您可以看到原来的填充被划掉，取而代之的是内联样式

我知道这可以通过javascript监控宽度并设置填充来实现，但我真的不想这么做，也不认为我应该这么做

编辑：已解决

首先，我应该添加类，而不是用javascript添加CSS

---

然后我就认为是推杆！重要的是，在媒体查询之外，它只会显示在桌面上，但它会接管所有媒体查询。因此，在查询中仅放置此项就可以工作。请注意，如果我使用两个单独的菜单（移动/桌面），我不需要这样做，但因为它是固定的，而且内容需要填充，所以必须这样做。但是使用这种技术，你也可以只使用一个菜单，但这样做菜单的高度。我已经在一个代码笔中演示了这项技术：

将此代码添加到样式表中应该可以解决问题，我刚刚在您的网站上使用开发人员工具尝试了这项技术，它正在工作：

@media only screen and (min-width: 643.2px) {
    #content {
        padding-top: 80px !important;
    }
}

---

尽管我强烈建议您为移动设备创建一个单独的导航菜单，并使用@media querys来显示它。

将此代码添加到样式表中应该可以解决问题，但我只是在您的网站上使用开发人员工具尝试了这一点，它正在工作：

@media only screen and (min-width: 643.2px) {
    #content {
        padding-top: 80px !important;
    }
}

---

尽管我强烈建议您为移动设备创建一个单独的导航菜单，并使用@media querys来显示它。

但您的核心问题是将CSS和内嵌样式混合在一起。一般来说，避免使用

element.style将特定的CSS属性直接放置在元素上，无论是在HTML中=，或通过jQuery的
.css（）
功能。相反，您应该使用类将所需的属性定义为CSS规则：

#可折叠菜单{高度：自动；}
#内容{填充顶部：290px；}
#someelt.menu-visible#可折叠菜单{高度：0；}
#someelt.menu-visible#content{padding top:80px；}

其中，
someelt
是某个更高级别的祖先元素。然后，您的JS变得简单

功能切换菜单（）{
document.getElementById（'someelt'）.classList.toggle（'menu-visible'）；
}

如果您的目标浏览器不支持
classList
（请参阅），jQuery提供了自己版本的类切换

CSS不是命令式语言，但如果你愿意，你可以把上面最后两条规则中的
#somelt.menu visible
部分想象成一种
if
语句：“如果菜单是可见的，那么将
可折叠菜单
压缩到零高度”，等等。在这个CSS隐喻中，它是一种编程语言（事实上是这样的），我想，
#someelt
类的
菜单可见可以被认为是一种布尔“变量”。最有可能的是，JS中不再需要相应的变量

无论如何，这样做的好处是，查看您的代码的人只需查看CSS文件就可以看到所有与CSS相关的逻辑，而不必同时查看CSS和JS，而且您可以在一个地方更改与CSS相关的内容。
您的核心问题是，您正在混合CSS和内嵌样式。一般来说，避免使用
element.style将特定的CSS属性直接放置在元素上，无论是在HTML中=，或通过jQuery的
.css（）
功能。相反，您应该使用类将所需的属性定义为CSS规则：

#可折叠菜单{高度：自动；}
#内容{填充顶部：290px；}
#someelt.menu-visible#可折叠菜单{高度：0；}
#someelt.menu-visible#content{padding top:80px；}

其中，
someelt
是某个更高级别的祖先元素。然后，您的JS变得简单

功能切换菜单（）{
document.getElementById（'someelt'）.classList.toggle（'menu-visible'）；
}

如果您的目标浏览器不支持
classList
（请参阅），jQuery提供了自己版本的类切换

CSS不是命令式语言，但如果你愿意，你可以把上面最后两条规则中的
#somelt.menu visible
部分想象成一种
if
语句：“如果菜单是可见的，那么将
可折叠菜单
压缩到零高度”，等等。在这个CSS隐喻中，它是一种编程语言（事实上是这样的），我想，
#someelt
类的
菜单可见可以被认为是一种布尔“变量”。最有可能的是，JS中不再需要相应的变量

无论如何，这样做的好处是，查看您的代码的人只需查看CSS文件就可以看到所有与CSS相关的逻辑，而不必同时查看CSS和JS，而且您可以在一个地方更改与CSS相关的内容。
为什么不使用CSS