JavaScript 無効限定の CSS を適用する
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 を上書きします。