THE HAM MEDIA BLOG

JavaScript OFF環境に優しく?jQueryでCSSを追加

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS

jQueryでstyle追加

JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか?

それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。

チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQueryで考えてみました。

DOMの完了を待たずに実行するには

jQueryは通常、慣習的に「$(function(){});」とか「$(document).ready(function(){});」として書き始めるようにしているのですが、これはDOMの準備ができたら実行するようになっているので、それを使用しなければいいじゃん?なんて考えた。

そこで、下記のようなスクリプトで、DOMの実行が完了する前にjQueryでstyleタグを追加してみます。

jQueryでstyleタグを追加

styleタグを作り、head内に追加。

■Script

(function($) {
$('<style />',{
    type:'text/css',
    text:'#demo1 .tabBlock p{display:none;}'+
         '#demo1 .tabBlock p.tab_on{display:block;}'
}).appendTo('head');
})(jQuery);

jQuery(function(){
    $('a','#demo1 p#tab').click(function(){
        var tab = $(this).attr('href');
        $('p','#demo1 .tabBlock').removeClass('tab_on');
        $(tab).addClass('tab_on');
        return false;
    });
});

※上記はjQuery1.4以上対応。

■デモ1

画像の切り替え 画像1 画像2

このサンプルでは、CSSとclassの有無で表示と非表示の切り替えをしています。

JavaScriptでのstyle追加でも問題なく動作しますし、DOMの完了を待たずとも実行してくれます。

※今回はblogでの紹介なので、ページ途中にてコードをいれているため、若干非表示部分も見えるかもしれません。

JavaScriptのみ

こちらはコード内で表示非表示の指定をしている版。ページ下の方にくると、それほど問題はないです。

■Script

jQuery(function(){
    $('p','#demo2 .tabBlock').not(':eq(0)').hide();
    $('a','#demo2 p#tab').click(function(){
        var tab = $(this).attr('href');
        $('p','#demo2 .tabBlock').hide();
        $(tab).show();
        return false;
    });
});

■デモ2

画像の切り替え 画像1 画像2

デモ2の場合は、DOMの完了を待ってからの実行になるので、ページが重かったり、タブが多かったりすると、中身が最初に見えてしまいます。クライアントによっては、最初に見えてしまうのも嫌なところが多いとか・・・そんな時はデモ1の方で行うのが良さそうです。

注意!!

今回の紹介では、styleの追加の際に、text:○○として、JavaScriptに直接CSSを書いたのですが、JavaScript内にCSSを入れるのは、メンテナンス性が下がります。text:○○で追加ではなく、外部CSS化しておき、それをhref:○○として読み込むようにしたほうがいいです。

それとまだテスト段階なので、上記の方法を採用される方は、各ブラウザチェックや動作確認など、しっかりするようにして下さい。

この記事へのコメント
JavaScriptでCSSを書き出したり外部CSSを読み込むよりも、JavaScriptでクラスだけ与えるのが楽だと思いますよ。

CSS

.js-on #demo1 .tabBlock p { display: none; }
.js-on #demo1 .tabBlock p.tab_on { display: block; }

JavaScript

$('body').addClass('js-on');
Posted by シマダ at 2012年07月23日
これって(function($) {  })(jQuery);でくくってるからDOM読み込み待ちですよね?だったら意味ないのでは?
jsのoff環境対策なら良いかもしれませんが、読み込みに時間かかるページの場合はチラ見え対策にはならないと思いますが、どうなんでしょうか?
対象がサイト上部のロゴ(しかもインラインSVG)でアニメーションで出す場合なんかだと特に。
Posted by たくぞう at 2016年04月18日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/142480055
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。