Question

此刻我在网站的<head>中

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

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

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

尽管我已经坚持了十年，但我想知道在当今这个更现代的时代是否有更好的方法可以实现相同的最终目标？

谢谢

Answer 1

You should not use document.write。而是使用

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

除此之外，您的方法也很好。

Answer 2

渐进式增强方式将从

开始

$(this).parent().siblings().children()

，然后使用javascript删除该类：

<html class="no-js">

然后可以根据该类设置元素的样式。

示例：

<head>
  <!-- your stuff -->
  <script>
    document.querySelector('html').classList.remove('no-js')
  </script>
</head>

您也可以执行相反的操作，并添加一个html:not(.no-js) .jshide { display: none; } html:not(.no-js) .jsshow { display: block; } html:not(.no-js) .jsblank { visibility: hidden; }类（而不是删除一个否定词-在此您需要考虑双重否定词）。那将是：

js-enabled

在您的CSS中：

<html>
  <head>
    <!-- your stuff -->
    <script>
      document.querySelector('html').classList.add('js-enabled')
    </script>
  </head>
  ...

它基本上与您做相同的事情（切换样式），除了这种方式您不触摸DOM（或者至少不添加新元素）并且将CSS保留在CSS文件中。

Answer 3

正如前面提到的（现在已删除）答案，可能更惯用的方法是使用<noscript>和<style>元素。不过，要完全做到这一点，需要重写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>

Answer 4

HTML标签{('best', 'price'): 95, ('price', 'range'): 190, ('range', 'got'): 5, ('got', 'diwali'): 2, ('diwali', 'sale'): 2, ('sale', 'simply'): 1, ('simply', 'amazed'): 1, ('amazed', 'performance'): 1, ('performance', 'camera'): 30, ('camera', 'clarity'): 35, ('clarity', 'device'): 1, ('device', 'speed'): 1, ('speed', 'looks'): 1, ('looks', 'display'): 1, ('display', 'everything'): 2, ('everything', 'nice'): 5, ('nice', 'heats'): 2, ('heats', 'lot'): 14, ('lot', 'u'): 2, ('u', 'using'): 3, ('using', 'months'): 20, ('months', 'no'): 10, ('no', 'problems'): 8, ('problems', 'whatsoever'): 1, ('whatsoever', 'great'): 1正是为此而考虑的。仅当用户禁用脚本或浏览器不支持脚本时，才会显示其内容。 <noscript>和<body>自html5起都是允许的。

与直接提供HTML规范有关的所有其他答案相比，使用此方法具有优势。由于它是本地的，因此无需执行任何“修补程序”。在启用javascript时隐藏您的元素会在页面呈现和javascript下载/运行之间引起闪烁（有一些方法可以绕开其中的大部分，但仍然...）。

我不喜欢使用javascript为非脚本用户隐藏元素的另一件事是，实际上，每个使用脚本的人都会受到某种形式的惩罚，因为这会给他们增加开销。

有没有更好的方法可以根据JS的存在来隐藏/显示元素？

4 个答案: