裏紙に書く程度の内容

jQuery JavascriptのON/OFF時の表示制御する方法

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

HTML要素にJSクラスをつけましょう

についてです。

タイトルだけじゃわかりませんが、JavascriptがON(又はOFF)の場合に表示を制御するためのTipsです。

やり方

まず、jQueryで<html>タグにクラスを追加します。

$('html').addClass('JS');

直接HTMLでクラス指定するのではなく、jsで実行させるのがミソ。これでjsが有効なら<html class='JS'>となるし、無効なら<html>のままです。

あとはcssで表示の切り替えをすればOK。

/* JSが有効の場合は表示しない */
.JS #content {
    display: none;
}

/* JSが有効の場合のみ表示する場合 */
#article {
    display: none;
}
.JS #article {
    display: block;
}

簡単ですね。

このTipsの利点はJS側は1行で済んで、cssで制御可能なことでしょう。JS側のコードがすっきりします。

結論

JS ON/OFF で表示制御するならHTMLタグに”JS”クラスをつける!

Index