代码之家 › 专栏 › 技术社区 › Codemonkey

有没有更好的方法来隐藏/显示基于JS的元素?

css javascript

Codemonkey · 技术社区 · 7 年前

<head> 我的网站的

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

我的想法是,如果启用JS,我不想在我的站点上显示一些元素。例如,可能是表单提交按钮,因为如果启用JS,表单将使用ajax下拉列表。

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

不过,我已经有十年的经验了,我想知道在这个更现代的时代,是否有更好的方法来实现同样的最终目标?

谢谢

4 回复 | 直到 7 年前

connexo 7 年前

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);

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

Roman 7 年前

<html class="no-js">

然后使用javascript删除该类:

<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 类(而不是删除一个负片-然后你需要用双重负片思考)。那就好像:

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

在css中:

html.js-enabled .jshide {
   display: none;
}
html.js-enabled .jsshow {
   display: block;
}
html.js-enabled .jsblank {
   visibility: hidden;
}

它基本上与您所做的相同(切换样式),只是这样您就不会接触到DOM(或者至少不会向其中添加新的元素),而是将CSS保存在CSS文件中。

Steve 7 年前

正如前面提到的(现在删除的)答案,可能更习惯的方法是 <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>

Salketer 7 年前

<noscript> 一直被认为是为了这件事。只有当用户禁用脚本或浏览器不支持脚本时,才会显示其内容。允许进入 <body> <head> 从html5开始。

使用它比提供的大多数其他答案都有好处,因为它直接来自HTML规范,并且所有浏览器都支持它。因为它是本地的,所以没有“补丁”可以做。在启用javascript时隐藏元素将导致页面呈现时间和javascript下载/运行时间之间的闪烁(有一些方法可以避免大部分情况,但仍然…)。

我不喜欢使用javascript为非脚本用户隐藏元素,这意味着每个使用脚本的人实际上在某种程度上都会受到惩罚,因为这会给他们带来开销。