Javascript 避免文档写入

我正在尝试根据视口的宽度应用类名，以便在加载和处理JavaScript之前不会“闪烁”

例如，我有一个引导侧边栏，如果用户在移动设备上，我想在默认情况下隐藏它。如果我只是在

document.ready

事件中添加一些逻辑，那么菜单在消失之前会在瞬间可见，这很烦人

为了避免这种行为，我使用

document.write

为我的边栏创建打开标记：

<script type="text/javascript">
  // Prevent flicker of menu before collapsing on small screens
  if (window.outerWidth < 768) {
    document.write('<aside class="collapse" id="primary-sidebar">');
  } else {
    document.write('<aside class="collapse in width" id="primary-sidebar">');
  }
</script>
...
</aside>

//防止菜单在小屏幕上崩溃前闪烁
如果（窗宽小于768）{
文件。写（“”）；
}否则{
文件。写（“”）；
}
...

虽然这解决了问题，但我确实在Firefox中收到了关于不平衡树的警告，我已经阅读了

文档。write

不应该以这种方式使用

是否有其他方法可以根据窗口大小添加宽度

类，而无需等到页面全部加载后再添加？
您可以使用：

var aside = document.querySelector("#primary-sidebar");
if (window.outerWidth < 768) {
    aside.className = "collapse";
} else {
    aside.className = "collapse in width";
}

var aside=document.querySelector（“主边栏”）；
如果（窗宽小于768）{
aside.className=“collapse”；
}否则{
aside.className=“宽度折叠”；
}
您可以使用：

var aside = document.querySelector("#primary-sidebar");
if (window.outerWidth < 768) {
    aside.className = "collapse";
} else {
    aside.className = "collapse in width";
}

var aside=document.querySelector（“主边栏”）；
如果（窗宽小于768）{
aside.className=“collapse”；
}否则{
aside.className=“宽度折叠”；
}
使用JavaScript处理基于屏幕大小的隐藏/显示等事情会给自己带来很大压力

根据屏幕大小隐藏/显示内容的标准方法是使用

例如：

@media (min-width: 768px) {
    #primary-sidebar {
        display:none;
    }
}

如果使用JavaScript处理基于屏幕大小的隐藏/显示之类的事情，会给自己带来很大的压力

根据屏幕大小隐藏/显示内容的标准方法是使用

例如：

@media (min-width: 768px) {
    #primary-sidebar {
        display:none;
    }
}

如果要防止最初显示菜单，请将元素设置为

display: none;

或

另一方面，您不需要将它放在$（document.ready（）中；如果您的唯一条件是窗口的宽度。
如果要防止菜单最初显示，请将元素设置为

display: none;

或

另一方面，您不需要将它放在$（document.ready（）中；如果您唯一的条件是窗口的宽度。
不要将Javascript放在
document.ready
中，而是将
标记放在相关元素的后面

<aside class="collapse" id="primary-sidebar">
...
</aside>
<script type="text/javascript">
if (window.outerwidth >= 768) {
    document.getElementById("primary-sidebar").className = "collapse in width";
}
</script>


...
如果（window.outerwidth>=768）{
document.getElementById（“主边栏”）.className=“宽度折叠”；
}

虽然这会短暂地显示错误的大小，但它的大小应该调整得非常快，以至于闪烁应该是不可见的。我将此逻辑放在桌面版本中，因为处理速度应该更快。
而不是将Javascript放在
文档中。ready
，将
标记放在相关元素之后

<aside class="collapse" id="primary-sidebar">
...
</aside>
<script type="text/javascript">
if (window.outerwidth >= 768) {
    document.getElementById("primary-sidebar").className = "collapse in width";
}
</script>


...
如果（window.outerwidth>=768）{
document.getElementById（“主边栏”）.className=“宽度折叠”；
}

虽然这会短暂地显示错误的大小，但它的大小应该调整得非常快，以至于闪烁应该是不可见的。我将此逻辑放在桌面版本中，因为处理速度应该更快。
感谢您分享此信息。我同意@media CSS规则适合这样的场景，但我试图利用标准引导类来避免在媒体选择器中复制样式。如果我只是添加媒体选择器并说
display:none则可折叠切换不再起作用。如果“in”“collapse”样式来自库，则这将不起作用。如@Quantastical said@Quantastical如果您或您的库依赖JavaScript处理可折叠切换，这就是问题所在。这样做不会遇到很多问题。如果只是一个问题，而库没有为您这样做，只需找到该文件，直接编辑它以适应屏幕大小，或者制作自定义副本并编辑它。@Dave，我不确定我是否完全理解您的意思。在没有JavaScript的情况下，如何创建切换开关？我的意思是，我想你可以使用一个隐藏的复选框和标签，但人们真的这样做了吗？如何根据浏览器宽度设置复选框的初始状态？@Quantastical您仍然可以使用javascript运行onclick…等，但您可以使用CSS设置初始状态。是的，人们就是这样做的。使用javascript根据屏幕大小设置某些内容的可见性是非常不标准的（也是不好的做法）。感谢您分享。我同意@media CSS规则适合这样的场景，但我试图利用标准引导类来避免在媒体选择器中复制样式。如果我只是添加媒体选择器并说
display:none则可折叠切换不再起作用。如果“in”“collapse”样式来自库，则这将不起作用。如@Quantastical said@Quantastical如果您或您的库依赖JavaScript处理可折叠切换，这就是问题所在。这样做不会遇到很多问题。如果只是一个问题，而库没有为您这样做，只需找到该文件，直接编辑它以适应屏幕大小，或者制作自定义副本并编辑它。@Dave，我不确定我是否完全理解您的意思。在没有JavaScript的情况下，如何创建切换开关？我的意思是，我想你可以使用一个隐藏的复选框和标签，但人们真的这样做了吗？如何根据浏览器宽度设置复选框的初始状态？@Quantastical您仍然可以使用javascript运行onclick…等，但您可以使用CSS设置初始状态。是的，人们就是这样做的。使用javascript来