仅在启用 javascript 时隐藏元素答案

【问题标题】：Hide element only if javascript is enabled仅在启用 javascript 时隐藏元素
【发布时间】：2011-11-23 06:32:54
【问题描述】：

我有一个显示如下文本框的视图：

@Html.TextBoxFor(m => m.CodeGuest, new {style = "display: none"})

它通过 javascript 显示（因此用户单击复选框）。

如果没有启用 javascript，我必须删除这一行 (style = "display: none") 以便默认显示文本框。

【问题讨论】：

【解决方案1】：

我将其作为评论输入，因为它看起来很明显，我认为其他人可以得到一些支持，但是：

<noscript>
  <div>
    Hello YOU HAVE JAVASCRIPT TURNED OFF YOU BIG SILLY
  </div>
</noscript>

<noscript> 标记的内容仅在禁用 JavaScript 时显示。

【讨论】：

【解决方案2】：

您可以为此使用客户端逻辑，使其默认可见并在页面加载时使用 javascript 隐藏它。

如果你使用 jQuery，它会是这样的：

$(function() {
    $('[name="CodeGuest"]').hide();
});

并从 Razor 逻辑中删除 display: none。

另一种解决方案是将文本框元素包装在<noscript>-tags 中。

例如：

<noscript>
     @Html.TextBoxFor(m => m.CodeGuest)
</noscript>

【讨论】：

【解决方案3】：

我通常处理这个问题的方法是在 Dom 加载时隐藏元素最初 WITH javascript...这样，没有 javascript = 没有隐藏...

【讨论】：

认真的吗？运行 js 而不是使用 noscript 标签，这看起来像是用大炮射鸟
@Martin Jespersen：我认为，他仍然需要 DOM 中的元素，因为他将在单击复选框后显示文本框。所以我认为通过 JS 隐藏它是一种完全可以接受的方式
至少有一些迹象表明这是动态操作，而不是像将元素转储到 noscript 块中那么简单；否则，隐藏元素是没有意义的。在我看来，JS 解决方案可能和 noscript 一样好。

【解决方案4】：

我通常更喜欢这样做的方式，以避免在使用 JS 隐藏解决方案时在长页面上闪烁内容，是在 CSS 中添加这样的内容：

html.jsEnabled #CodeGuest {display: none;}

然后在 JS 中，添加这个：

document.getElementsByTagName('html')[0].className += ' jsEnabled';

优点是您甚至可以在 DOM 就绪之前运行那段代码，因为 HTML 标记已经可用。另外，我可以将该类用于我可能想到的任何其他渐进式增强功能。

【讨论】：

【解决方案5】：

我喜欢 Pointy 的回答，但这里有一个简单的脚本选项：

<script type="text/javascript">
  document.write('<style type="text/css">#hideMe {display:none;}<\/style>');
</script>

虽然 noscript 元素是优雅的，但它不符合特征和能力检测以及优雅降级的原则。更好的策略是仅在浏览器能够运行相关脚本时决定是否显示元素。

上面的建议也有同样的缺点。

【讨论】：

【解决方案6】：

您可以只使用 JavaScript 隐藏元素，因此默认情况下会显示该元素。只有当 JavaScript 被执行时，元素才会被隐藏。

我不知道你给定的代码会生成什么标记，但是使用 JavaScript 你可以做这样的事情（对于一个简单的例子，当元素获得一个 id 时）：

elem = document.getElementById(id);
elem.style.display = 'none';

因此，当启用 JavaScript 时，它将被隐藏。请务必等到 DOM 完全加载后，再执行脚本，否则最终可能什么都不做。

对于 DOM 操作，我倾向于使用 jQuery，它有一个很好的 DOM-ready Listener 和简单的元素选择。

【讨论】：