JavaScript:特定のクラス名のノードに対してスタイルを設定する

イントロダクション

JavaScript で動的にスタイルを変更したいという場面は良くあると思います。

id を設定した要素に対しては比較的簡単にスタイルの変更ができると思います。
document.getElementById で取得した要素に対して、要素.style.スタイル = "..." で設定するだけです。

しかしながら、特定のクラス名を持つ要素に対して、スタイルの変更をする場合には、一筋縄ではいきません。

各要素のスタイルではなく、ページ全体のスタイルシートに対して操作を行う方法もありますが、インターネットで情報を調べると一行で設定できるようなものではなく、結構手間がかかりそうでした。(*1)

*1:
JavaScriptによるスタイルシート(CSS)の操作
http://ash.jp/web/css/js_style.htm


そこで、特定のクラス名の要素に対して、その要素の style を変更できるようなコードを作成してみました。

コード

特定のクラス名のノードに対してスタイルを設定する setStyleAllFromClassName メソッドです。

    // 特定のクラス名のノードに対してスタイルを設定する
    function setStyleAllFromClassName(className, callBack) {
        
        // ドキュメントを全精査する
        setStyleFromClassName(document.body, className, callBack);

        // 特定のクラス名のノードに対してスタイルを設定する
        function setStyleFromClassName(node, className, callBack) {
            
            // クラス名があるときのみ処理を実施
            if (node.className) {
                var classNames = node.className.split(/\s+/);
                for (var i = 0; i < classNames.length; i++) {

                    // 目的とするクラス名が見つかったら、コールバックによりスタイルを適用
                    if (className == classNames[i]) {
                        callBack(node);
                        break;
                    }
                }
            }

            // 再帰的に特定のクラス名を保持するノードを探す
            for (var i = 0; i < node.childNodes.length; i++) {
                setStyleFromClassName(node.childNodes[i], className, callBack);
            }
        }
    }

使い方

setStyleAllFromClassNameメソッドに対して、スタイルを設定したいクラス名と、スタイル適用のためのコールバックメソッドを設定して、呼び出します。

                setStyleAllFromClassName("post-header", function (node) {
                    node.style.display = "inline";
                });

スタイル適用のためのコールバックメソッドの引数 node はスタイルを適用する対象の要素が設定されています。

従って、その node の style に対して、様々なスタイルシートの設定を行えば、その要素のスタイルを変更することができます。

まとめ

以上で、特定のクラス名のノードに対してスタイルを設定することができるようになりました。