THE HAM MEDIA BLOG

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以上対応。

■デモ１

このサンプルでは、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;
    });
});

■デモ２

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

注意！！

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

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