Asp.net mvc 3 仅在启用javascript时隐藏元素

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

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

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

---

如果未启用javascript，我必须删除这一行（

style=“display:none”

），以便默认情况下显示文本框。

我通常的处理方法是在加载Dom时使用javascript隐藏元素。。。这样，no javascript=no hidden…

您可以使用客户端逻辑，将其作为默认值显示，并在页面加载时使用javascript隐藏它

如果您使用jQuery，它将如下所示：

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

并从Razor逻辑中移除显示：无

另一种解决方案是将textbox元素包装在

-标记中

例如：

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

@Html.TextBoxFor（m=>m.CodeGuest）

我喜欢波蒂的答案，但这里有一个简单的脚本选项：

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

write（'#hideMe{display:none；}'）；

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

---

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

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

我不知道给定代码会生成什么标记，但使用JavaScript可以执行类似的操作（对于一个简单的示例，当元素获得id时）：

因此，当启用JavaScript时，它将被隐藏。请确保在执行脚本之前等待DOM完全加载，否则这可能会导致什么都不做

---

对于DOM操作，我倾向于使用jQuery，它有一个很好的DOM就绪侦听器和简单的元素选择。

我键入此作为注释，因为它看起来很明显，我认为其他人可以获得一些支持，但是：

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

你好，你已经关掉JAVASCRIPT了，你这个大傻瓜

---

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

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

html.jsEnabled#CodeGuest{display:none；}

然后在JS中，只需添加以下内容：

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

---

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

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

的标签，它的内容只有在禁用JavaScript时才会显示。这实际上是很好的，因为它不会冒页面加载时元素闪烁的风险，将其添加到我的答案中。该消息不适用于不支持JS的UAs。此外，带有糟糕JS实现的UAs可能无法可靠地显示内容。一个包罗万象的解决方案是使用立即运行的JS删除不适用于支持JS/启用JS的UAs的DOM元素，正如其他一些答案所示。那么，在2011年，不了解

标记的UAs有多普遍？

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