コニファ・ロゴ

ツール集:jQueryを使って、JavaScriptが有効か無効かを簡単に判別

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を外していたり、スペルミスなどをすると、ここには何も表示されません。

js有効

 

 

戻るボタン