2012/12/30

CSSのクラスの値をJavaScriptで変更する方法

jQuery に有りそうで無いのでクラスに設定したスタイルを後からJavascript変更する方法をメモ。

function Common(){this.initialize.apply(this, arguments)};
(function(Class){

    /**
    * ルールのキャッシュ
    * @type CSSStyleRule
    */
    var classCssRuleCache = {};

    /**
    * セレクタに一致するルールを取得。
    * <li>検索は重いのキャッシュする。
    * @param {string} selectror セレクタ文字列
    * @returns {CSSStyleRule} ルール
    */
    Class.getCssRule = function(selector) {
        if (classCssRuleCache[selector]) return classCssRuleCache[selector];
        var sheets = document.styleSheets;
        for (var i=0; i<sheets.length; i++) {
            var rules = sheets[i].cssRules;
            if (rules == null) rules = sheets[i].rules; // ForIE
            for (var j=0; j<rules.length; j++) {
                if (selector == rules[j].selectorText) {
                    classCssRuleCache[selector] = rules[j];
                    return rules[j];
                }
            }
        }
        return null;
    }

    /**
    * セレクタに一致するルールを取得。
    * <li>当該セレクタのルールが存在しなければ作成する。
    * @param {string} selectror セレクタ文字列
    * @returns {CSSStyleRule} ルール
    */
    Class.getCssRuleWithDefine = function(selector) {
        var rule = Class.getCssRule(selector);
        if (rule) return rule;

        var sheet = document.styleSheets[0];
        if (sheet.insertRule) {
            sheet.insertRule(selector+"{}", sheet.cssRules.length);
        } else {
            sheet.addRule(selector,"dummy:dummy");//forIE
        }
        return Class.getCssRule(selector);
    }


    /**
    * セレクタにルールを設定。
    * <li>当該セレクタのルールが存在しなければ作成する。
    * @param {string} selectror セレクタ文字列
    * @param {object} スタイルのマッピング例：{textAling: "center",…}
    */
    Class.setCssRule = function(selector, style) {
        var rule = Class.getCssRuleWithDefine(selector);
        if (rule == null) return;
        for (var k in style) rule.style[k] = style[k];
    }


    /**
    * セレクタにルールを important 付きで設定。
    * <li>当該セレクタのルールが存在しなければ作成する。
    * @param {string} selectror セレクタ文字列
    * @param {object} スタイルのマッピング例：{textAling: "center",…}
    */
    Class.setCssRuleImportant = function(selector, style) {
        var rule = Class.getCssRuleWithDefine(selector);
        if (rule == null) return;
        for (var k in style) rule.style.setProperty(k, style[k], 'important');
    }

})(Common);

使用例：

Common.getCssRule(".MyClass", {textAlign:"center", color:"red"});

だけ。setCssRuleImportant()を使えば !impotant 付きになる。
厳密に言うとクラスのスタイルの言うものは存在しないのでセレクタのスタイルを変更している。つまり第一引数にクラス名を指定する時はドット(.)が必須なので注意。

間単に解説すると読み込まれたCSSはブラウザ依存で以下のプロパティに保存されている。

ブラウザ	プロパティ名
IE8以前	document.styleSheets[ ].rules[ ]
その他	document.styleSheets[ ].cssRules[ ]

cssRules[ ] の型は CSSStyleRule で以下のプロパティを持つ。

型	プロパティ名	説明
string	selectorText	セレクタ文字列
CSSStyleDeclaration	style	スタイルセット

セレクタ文字列の正規化の方法は不明だったので複雑なセレクタを変更する場合は自力で正規化をする必要があるかもしれない。(タグ名の大文字／小文字や空白の扱いの事)

IE8以前はルールの追加方法も異る。

ブラウザ	プロパティ名
IE8以前	addRule(selector, style[, index])
その他	insertRule(rule,index)

あと @import とか対応が必要だけどあんまり使わないから必要になるまで放置かな(^^;

》この投稿へのコメント

2012/11/18

CSSだけでボーダーレイアウトのテンプレ

CSSだけでヘッダー、フッター、サイドを固定するのは以外と難しい。
ググっても怪しいやり方しか出てこない。(まあ IE6 のせいなんだが)

つう訳でCSSだけでクロスブラウザの真っ当な(IEハック無し) ボーダーレイアウトのテンプレを書いてみた。 (但し、IE7は後方互換モード)

ボーダーレイアウト：

ブラウザを小さくした所：

ブラウザを小さくしてもヘッダー、フッター、サイドはそのままの大きさで中央部のみ可変サイズとなる。
スクロールバーは中央部にしか出ない。

他のブラウザで動作確認。

Firefox-ESR:

Safari:

IE6:

IE7(後方互換モード):

IE8:

IE6,IE8は本物でも確認した。IE7はIE-Testerのみ。

実行サンプル

まあ、JavaScriptを使えば簡単だけどレイアウトの為だけに jQuery+Plugin を使わなくて済むのは良いじゃないかと。

ソース

HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Border layout frame</title> <link rel="stylesheet" href="BorderLayout.css" /> <style> *{font: bold large sans-serif;} </style> </head> <body> <div id="borderLayoutMain" class="BorderLayoutFrame"> <div id="borderLayoutMainInner"> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> テストテストテストテストテストテストテスト <br/> </div> </div> <div id="borderLayoutLeft" class="BorderLayoutFrame"> Left </div> <div id="borderLayoutRight" class="BorderLayoutFrame"> Right </div> <div id="borderLayoutHeader" class="BorderLayoutFrame"> Header </div> <div id="borderLayoutFooter" class="BorderLayoutFrame"> Footer </div> </body> </html>

CSS: IEハック無しです (^^)v

html,body { height:100%; padding:0; margin:0; overflow: hidden; } .BorderLayoutFrame { box-sizing: border-box; -moz-box-sizing: border-box; display: inline-block; position: absolute; overflow: hidden; zoom:1; background: white; } #borderLayoutHeader { width: 100%; height: 80px; /* Header height */ top: 0; border-bottom: 1px solid gray; } #borderLayoutFooter { width: 100%; height: 30px; /* Footer height */ bottom: 0; border-top: 1px solid gray; } #borderLayoutLeft { width: 200px; /* Left width */ height: 100%; top: 0; left: 0; padding-top: 80px; /* Header height */ padding-bottom: 30px; /* Footer height */ border-right: 1px solid gray; } #borderLayoutRight { width: 200px; /* Right width */ height: 100%; top: 0; right: 0; padding-top: 80px; /* Header height */ padding-bottom: 30px; /* Footer height */ border-left: 1px solid gray; } #borderLayoutMain { width: 100%; height: 100%; top: 0; left: 0; padding-top: 80px; /* Header height */ padding-left: 200px; /* Left width */ padding-right: 200px; /* Right width */ padding-bottom: 30px; /* Footer height */ } #borderLayoutMainInner { height: 100%; width: 100%; overflow: auto; position: relative; } /* EOF */

》この投稿へのコメント

2012/10/29

タグの間の空白対策

HTMLでタグを改行区切りで記述した時に入る空白の対策メモ。

こうした時の

この隙間の事。

普通形

コードの汚さを我慢すればこれが一番楽。 <img src="img/user_black_female.png" /><img src="img/user_business.png" /><img src="img/user_business_boss.png" /><img src="img/user_female.png" />

letter-spacing:-n;

CSSの letter-spacing をマイナスにして調整する。
元ネタ：http://inspire-tech.jp/2011/06/inline_block_spaces/ <span style="letter-spacing: -0.40em;"> <img src="img/user_black_female.png" /> <img src="img/user_business.png" /> <img src="img/user_business_boss.png" /> <img src="img/user_female.png" /> </span>

幅指定がフォント依存なので厳密なケースでは使えない。