jQueryを使って、JavaScriptが有効か無効かを判別します。JavaScriptとCSSの両方を使って同じような動きを作っていて、JavaScriptの有効、無効を切り替えて作業しているとき、現状がどちらか忘れてしまうことがあります。そこで、html要素にclassを付けることで簡単に有効無効を確認する方法です。
次のようにscriptでhtml要素にclassを追加します。追加する対象はbody要素でも同様になります。
<script src="js/jquery-3.2.1.min.js"></script> <script> $('html').addClass('JS'); </script>
JavaScriptが有効のとき表示するhtmlとCSSを設定しておきます。
<div id="article">js有効</div> // html #article { // CSS display: none; color: blue; text-align: center; border: 2px solid blue; } .JS #article { display: block; }
確認表示するidをCSS「display: none」として非表示にします。続けて同じidに対して、親要素のclass名「JS」付きで「display: block」に指定します。JavaScriptが有効なら、html要素にclass名「JS」が追加されていて
「.JS #article」が存在するため、次のように表示されます。意図的にjQueryを外していたり、スペルミスなどをすると、ここには何も表示されません。