Javascript 有没有更好的方法基于JS的存在来隐藏/显示元素？_Javascript_Css

Javascript 有没有更好的方法基于JS的存在来隐藏/显示元素？

javascript css

Javascript 有没有更好的方法基于JS的存在来隐藏/显示元素？,javascript,css,Javascript,Css,目前，在我网站的中，我有 <script> document.write('<style>.jshide{display:none},.jsshow{display:block},.jsblank{visibility:hidden}</style>') </script> write（'.jshide{display:none}、.jsshow{display:block}、.jsblank{visibility:hidden}）

目前，在我网站的

中，我有

<script>
    document.write('<style>.jshide{display:none},.jsshow{display:block},.jsblank{visibility:hidden}</style>')
</script>


write（'.jshide{display:none}、.jsshow{display:block}、.jsblank{visibility:hidden}）

我的想法是，如果启用了JS，我不想显示我网站上的某些元素。例如，可能是一个表单提交按钮，因为如果启用了JS，表单将使用ajax下拉菜单

我可以在页面加载后用JS脚本以编程方式隐藏它们，但这会导致令人沮丧的闪烁等

我已经有了十年的时间了，我想知道在这个更现代的时代，是否有更好的方法来实现同样的最终目标？

谢谢。相反，使用

var style = document.createElement('style');
style.textContent = '.jshide{display:none}, .jsshow{display:block}, .jsblank{visibility:hidden}';
document.querySelector('head').appendChild(style);

除此之外，你的方法非常好。

。相反，使用

var style = document.createElement('style');
style.textContent = '.jshide{display:none}, .jsshow{display:block}, .jsblank{visibility:hidden}';
document.querySelector('head').appendChild(style);

除此之外，您的方法非常好。

逐步增强的方法是从

<html class="no-js">

您也可以做相反的事情，添加一个启用了js的

class（而不是删除一个负数，这样您就需要考虑双重负数）。那就好比：
<html>
  <head>
    <!-- your stuff -->
    <script>
      document.querySelector('html').classList.add('js-enabled')
    </script>
  </head>
  ...

它基本上与您所做的事情（切换样式）相同，只是这样您就不需要接触DOM（或者至少不需要向DOM添加新元素），并且可以将CSS保存在CSS文件中
 渐进增强的方法是从
<html class="no-js">


您也可以做相反的事情，添加一个启用了js的class（而不是删除一个负数，这样您就需要考虑双重负数）。那就好比：
<html>
  <head>
    <!-- your stuff -->
    <script>
      document.querySelector('html').classList.add('js-enabled')
    </script>
  </head>
  ...

它基本上与您所做的事情（切换样式）相同，只是这样您就不需要接触DOM（或者至少不需要向DOM添加新元素），并且可以将CSS保存在CSS文件中
 正如前面提到的（现已删除）答案，可能更惯用的方法是使用和
元素。不过，为了干净地完成这项工作，需要重写CSS以处理未加载脚本的情况，而不是加载脚本的情况。快速地，您可以覆盖仅js元素的类，如下所示：
<head>
  <style>
    .jshide { display: none }
    .jsshow { display: block }
    .jsblank { visibility: hidden }
  </style>
  <noscript>
    <style>
       .jshide { display: block }
       .jsshow { /* ?? */ }
       .jsblank { visibility: initial }
     </style>
   </noscript>
</head>


.jshide{display:none}
.jsshow{display:block}
.jsblank{可见性：隐藏}
.jshide{display:block}
.jsshow{/*？？*/}
.jsblank{可见性：初始值}
正如前面提到的（现已删除）答案，可能更惯用的方法是使用和
元素。不过，为了干净地完成这项工作，需要重写CSS以处理未加载脚本的情况，而不是加载脚本的情况。快速地，您可以覆盖仅js元素的类，如下所示：
<head>
  <style>
    .jshide { display: none }
    .jsshow { display: block }
    .jsblank { visibility: hidden }
  </style>
  <noscript>
    <style>
       .jshide { display: block }
       .jsshow { /* ?? */ }
       .jsblank { visibility: initial }
     </style>
   </noscript>
</head>


.jshide{display:none}
.jsshow{display:block}
.jsblank{可见性：隐藏}
.jshide{display:block}
.jsshow{/*？？*/}
.jsblank{可见性：初始值}
HTML标签
正是针对这一问题而设计的。仅当用户禁用脚本或浏览器不支持脚本时，才会显示其内容。从html5开始，在
和
中允许使用
使用它比提供的大多数其他答案都有好处，因为它直接来自HTML规范，并且受到所有浏览器的支持。因为它是本地的，所以没有“补丁”可以做。启用javascript时隐藏元素将导致页面呈现时间和javascript下载/运行时间之间的闪烁（有一些方法可以避免大多数情况，但仍然…）
我不喜欢使用javascript为非脚本用户隐藏元素的另一件事是，事实上，每个使用脚本的人都会因此受到某种惩罚，因为这会给他们带来开销。
HTML标签
正是针对这一问题而设计的。仅当用户禁用脚本或浏览器不支持脚本时，才会显示其内容。从html5开始，在
和
中允许使用
使用它比提供的大多数其他答案都有好处，因为它直接来自HTML规范，并且受到所有浏览器的支持。因为它是本地的，所以没有“补丁”可以做。启用javascript时隐藏元素将导致页面呈现时间和javascript下载/运行时间之间的闪烁（有一些方法可以避免大多数情况，但仍然…）
另一件我不喜欢使用javascript为非脚本用户隐藏元素的事情是，实际上，每个使用脚本的人都会因此受到某种惩罚，因为这会给他们带来开销。
出于好奇，为什么不使用文档。编写？@Nick感谢链接。似乎有正反两方面的因素（就像所有的事情一样）：）我将采用这种方法，因为我唯一不喜欢的是我的文档。写作方法是lighthouse将其作为一个问题，而事实并非如此。谢谢出于好奇，为什么不使用文档。写？@Nick谢谢你的链接。似乎有正反两方面的因素（就像所有的事情一样）：）我将采用这种方法，因为我唯一不喜欢的是我的文档。写作方法是lighthouse将其作为一个问题，而事实并非如此。谢谢我已经这样做过很多次了，这导致了提到的闪烁：（您将脚本放入
标记中，在绘制内容之前，该类将从html标记中删除。这意味着没有闪烁。我还没有尝试过，但在阅读您的代码时，我认为这是正确的，不会闪烁。您是否可以确认您已从页面的较低位置调用它，@connexo？@Codemonkey这可能就是原因；我通常有一个前端资产构建堆栈，它将所有JS组成一个单独的组件