JavaScriptの有効・無効を判別して表示する内容を変更する方法令和3年 3月 25日 作成

00158

概略

ブラウザ設定にて、JavaScriptが無効になっている場合は通常ページとは別の内容を表示させたい。その為には JavaScriptが有効・無効なのかを判別しなくてはいけない。

その有効・無効の判別方法を紹介します。

手段

考え方としては、通常表示するページを”クラスを付与した”JavaScript無効状態のスタイルを適用しておき、JavaScriptが有効であれば”そのクラスを削除し”JavaScript有効状態のスタイルを適用するというもの。

実装方法

HTML

<html lang="ja">
<head>
 ~ 略 ~
</head>
<body class="filter">
 ~ 略 ~
</body>
</html>

bodyタグにクラス[class="filter"]を付与。

JavaScript(JQuery)

$(function(){
	$(document).ready(function(){
	  	$("body").removeClass("filter");
	});
});

クラス[class="filter"]を削除。

考察

JavaScriptが有効であればこそ JavaScriptにてクラスを削除できるという仕組み。

記述量も少なくとても簡単。

最後までお読み下さり ありがとうございました。記事はここ迄です。

尚、本記事は作成から「3年以上」経過しています。

記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。

お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。

下段にはコメントを掲載しております。

広告バナー

コメント

頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。

注意事項を確認・了承した上、コメント投稿お願いいたします。

注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。

予めご了承下さい。

  • 記事内容と無関係なコメント
  • 公序良俗に反するコメント
  • 個人情報や法令違反を含むコメント
  • その他、管理者が不適切と判断したコメント

現在 頂いているコメントはありません

返信先(コメント管理番号)コメントに対し返信する場合のみ
お名前・ハンドルネーム2~32文字内で入力下さい
メールアドレス公開される事はありません
電話番号半角数字+ハイフンで入力下さい
コメント全角500文字内で入力下さい