Fatal编程技术网
  • javascript/
  • Javascript 是否有与<；noscript>；？

Javascript 是否有与<；noscript>；？

javascript html

Javascript 是否有与<；noscript>；？,javascript,html,noscript,Javascript,Html,Noscript,HTML中是否有一个标记，只有启用JavaScript时才会显示其内容？我知道的工作方式正好相反，当JavaScript关闭时显示其HTML内容。但是我只想在有JavaScript的情况下在站点上显示一个表单，告诉他们如果没有，为什么不能使用表单 我知道的唯一方法是使用document.write（）方法，对于大量HTML来说似乎有点凌乱。当页面加载时，可以通过JavaScript显示一个不可见的div。还可以使用JavaScript从另一个源文件加载内容并输出。这可能比你想要的要多一些 在这里

HTML中是否有一个标记，只有启用JavaScript时才会显示其内容？我知道
的工作方式正好相反，当JavaScript关闭时显示其HTML内容。但是我只想在有JavaScript的情况下在站点上显示一个表单，告诉他们如果没有，为什么不能使用表单

我知道的唯一方法是使用
document.write（）方法，对于大量HTML来说似乎有点凌乱。
当页面加载时，可以通过JavaScript显示一个不可见的div。
还可以使用JavaScript从另一个源文件加载内容并输出。这可能比你想要的要多一些
 在这里让人想起，但是它只适用于使用ASP.NET的情况——它可以在JavaScript中进行模拟，但是您必须再次使用document.write（）
 可以将段落| div的可见性设置为“隐藏”

然后在“onload”函数中，可以将可见性设置为“visible”

比如：



除非javascript可用，否则此文本将被隐藏。
没有相应的标记。您需要使用javascript来显示文本


一些人已经建议使用JS动态设置CSS可见。您还可以使用
document.getElementById（id）.innerHTML=“My Content”
动态生成文本，或者动态创建节点，但是CSS破解可能是最简单易懂的方法。
下面是隐藏div方式的示例：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>




*[打开js时的数据]{
显示：无；
}
document.getElementsByTagName（“样式”）[0]。textContent=“”；
JS正在播放。



（你可能需要为可怜的IE调整一下，但你明白了。）
我能想到的最简单的方法：


<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>




.jsonly{显示：无}

您是一个JavaScript用户




无文档、无脚本、纯CSS。
首先，始终将内容、标记和行为分开

现在，如果您正在使用jQuery库（您确实应该这样做，它使JavaScript变得更容易），那么以下代码应该可以：


$(document).ready(function() {
    $("body").addClass("js");
});


当启用JS时，这将在主体上为您提供一个额外的类。
现在，在CSS中，您可以在JS类不可用时隐藏该区域，并在JS可用时显示该区域

或者，您可以将
no js
作为默认类添加到body标记中，并使用以下代码：


$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});



请记住，如果禁用CSS，它仍然会显示。
我并不完全同意这里关于预先嵌入HTML并用CSS隐藏它直到它再次用JS显示的所有答案。即使启用了w/o JavaScript，该节点仍然存在于DOM中。诚然，大多数浏览器（甚至是可访问性浏览器）都会忽略它，但它仍然存在，而且可能会有奇怪的时候，它会反过来咬你

我首选的方法是使用jQuery生成内容。如果内容很多，那么您可以将其保存为HTML片段（仅显示希望显示的HTML，而不显示HTML、body、head等标记），然后使用jQuery的ajax函数将其加载到整个页面中

test.html


$（文档）.ready（函数（）{
$.get（''u test.html'，函数（html）{
$（'p:first'）。在（html）之后；
});
});
这是页面顶部的内容

这是页面底部的内容



_test.html

这是一个HTML片段文档



结果

这是页面顶部的内容

这来自一个HTML片段文档

这是页面底部的内容


我有一个简单而灵活的解决方案，有点类似于Will的解决方案（但具有作为有效html的附加好处）：

给body元素一个“jsOff”类。用JavaScript删除（或替换）此文件。让CSS隐藏任何类为“jsOnly”的元素和类为“jsOff”的父元素

这意味着如果启用了JavaScript，“jsOff”类将从主体中删除。这意味着类为“jsOnly”的元素不会有类为“jsOff”的父元素，因此不会与隐藏它们的CSS选择器匹配，因此将显示它们

如果禁用JavaScript，“jsOff”类将不会从主体中删除。带有“jsOnly”的元素将有一个带有“jsOff”的父元素，因此将匹配隐藏它们的CSS选择器，因此它们将被隐藏

代码如下：


<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>


我的解决方案

.css:


.js {
display: none;
}



$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});



<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>


.js:


.js {
display: none;
}



$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});



<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>


.html:


.js {
display: none;
}



$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});



<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>



Javascript已启用
Javascript已禁用

自从提出这个问题以来的十年里，这个问题被添加到HTML中。它允许直接隐藏元素而不使用CSS。与基于CSS的解决方案一样，元素必须通过脚本取消隐藏：


<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>





Javascript已打开，窗体可见。

点击我
document.getElementById（'f'）。hidden=false；
Javascript关闭，但表单隐藏，即使禁用CSS也是如此。

至少在xhtml标准中是不允许的。@Dykam:在HTML5中是允许的，实际上，几乎每个浏览器都支持它。建议使用
显示：无！重要提示
，以防止它被更具体的规则（例如，id或css选择器）覆盖，这些规则的目的是在启用脚本时使用。警告一句：当前版本的Chrome不会在首选项中禁用Javascript后第一次刷新页面时解析
中的标记。你需要点击两次重新加载才能让它工作。干净、简洁，不使用javascript。我喜欢它。在您的html示例中，d