19

我试图容纳没有 JavaScript 的用户。（顺便问一下，现在值得付出努力吗？）

在一个 HTML 文件中，我希望它的一部分在脚本打开时执行，另一部分在脚本关闭时执行。

标签让我做前者，<noscript>但如何实现后者？如果脚本关闭，如何标记 HTML 的一部分，以便浏览器不解析它？

4

8 回答 8

51

我一直在寻找一种方法来做到这一点，以便我可以隐藏一个导航下拉菜单，当启用 javascript 时，该菜单会呈现非功能性。但是，所有更改显示属性的解决方案都不起作用。

因此，我首先为下拉菜单周围的 div 元素分配了一个 ID (ddown)。

然后，在 HTML 文档的 head 部分中，我将其添加到：

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

这很奏效。不依赖于 javascript、jquery 或任何其他脚本：只是纯 HTML 和 CSS。

于 2012-12-13T10:25:02.900 回答
10

默认您想要隐藏的位与样式一样display:none，并使用 jQuery 或 JavaScript 打开它们。

于 2009-10-16T11:50:08.417 回答
6

这是关于如何使用 jQuery 完成此操作的视频教程：http: //screenr.com/ya7

代码：

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

然后body.noscript相应地隐藏相关元素。

编辑 但是，对于像这样的小修复，JQuery 可能会臃肿，所以我建议Zauber Paracelsus 的回答，因为它不需要 JQuery。

于 2009-10-16T11:56:26.687 回答
3

顺便问一下，现在的努力值得吗？

是的，值得担心可访问性。您应该尽可能使用渐进增强，即制作一个无需脚本即可工作的基本版本，然后在其上添加脚本功能。

一个简单的例子是一个弹出链接。你可以做一个这样的：

<a href="javascript:window.open('http://example.com/');">link</a>

但是，如果有人（例如，中键单击或尝试为其添加书签，或禁用脚本等）此链接将不起作用。相反，您可以执行以下相同操作：

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

它仍然不完美，因为您应该将行为层和结构层分开并避免内联事件处理程序，但它更好，因为它更易于访问并且不需要脚本。

于 2009-10-16T12:02:53.330 回答
1

jQuery方式：

$(document).ready(function(){
    $("body").removeClass("noJS");
});

伪 CSS

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

HTML

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>
于 2009-10-16T11:56:23.310 回答
1

如果内容仅在启用 JavaScript 时才有意义，则应由 JavaScript 代码直接插入而不是渲染。这可以通过简单地将 HTML 模板作为 JavaScript 代码中的字符串来完成，或者如果 HTML 更复杂，则可以使用 Ajax。

正如Reinis I 所提到的，这就是渐进增强的概念。

关于在 body 标签上使用类名的 CSS 技术，我建议反其道而行之，并js-enabled使用 JavaScript 向 body 标签添加一个 ' ' 类，这会改变页面 CSS。这符合我上面关于保持所有初始 HTML“非 JavaScript 友好”的评论。

于 2009-10-16T12:14:48.287 回答
0

您可以使用 Javascript 编辑页面的 HTML 

document.querySelector('div').style.display = 'block';
div {
  display: none;
}
<div>Div</div>
尝试使用 JS 和不使用 JS。

于 2020-05-14T22:28:02.323 回答
0

这使得没有 JS 就无法访问 div 中的内容，但是使用 JS 会将内容添加到使用 JS 的 div 中，您也可以使用 CSS 来做到这一点。要更改 CSS 添加：

document.querySelector('style').innerHTML = 'div{}';


document.querySelector('div, #div').innerHTML = 'Div';
<div id='div'></div>

于 2020-05-14T22:37:28.920 回答