JavaScript を使用する方法
<html class="nojs">
<head>
<script>
document.documentElement.classList.replace('nojs', 'js');
//document.documentElement.classList.remove('nojs');
//document.documentElement.classList.add('js');
</script>
<style>
/* JavaScriptが有効の時 */
.element1 {
color: blue;
}
.js .element2 {
color: blue;
}
/* JavaScriptが無効の時 */
.nojs .element1 {
color: red;
}
.element2 {
color: red;
}
</style>
</head>
<body>
<p class="element1">Hello World1</p>
<p class="element2">Hello World2</p>
</body>
</html>
簡易解説
<script>
を使用して<html>
のclass
を置き換えます。
JavaScriptが有効な場合、class
が置き換わります。
JavaScriptが無効な場合、JavaScriptが実行されないため、class
は置き換わりません。
noscript を使用する方法
<html>
<head>
<style>
/* JavaScriptが有効の時 */
.element {
color: blue;
}
</style>
<noscript>
<style>
/* JavaScriptが無効の時 */
.element {
color: red;
}
.js-code {
display: none;
}
</style>
<!-- linkでJavaScript無効時のスタイルシートを読み込む -->
<!-- link rel="stylesheet" href="/style-noscript.css"/ -->
</noscript>
</head>
<body>
<p class="element">Hello World</p>
<p>
Hello
<span class="js-code">JavaScript</span>
<noscript>NoScript</noscript>
World
</p>
</body>
</html>
簡易解説
<noscript>
を使用してスタイルシートを上書きします。
JavaScriptが有効な場合、<noscript>
が処理されず元々のCSSが適用されます。
JavaScriptが無効な場合、<noscript>
内の<style>
or <link rel="stylesheet">
が元々のCSSを上書きします。