javascriptでCSSを操る「Dynamic CSS via JavaScript」

便利なのかわかりませんが、CSSをjavascriptで指定できるDynamic CSS via JavaScriptです。
javascriptなどの各プログラミング言語を使用してる人にとっては、ループや条件分岐できて便利なのかな。。

使用方法

Dynamic CSS via JavaScriptからcss.jsをmootoolsからmootools.js（v1.2）をダウンロードします。

<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript" src="http://yourdomain/css.js"></script>
<script type="text/javascript">
 var css = new CSS();
css.add_rules({
    'span.bold':
    {
        'font-weight': 'bold'
    }
}).refresh();
</script>

上記を記述し、対応する要素を書き込めば完成です。

<span class="bold">テキスト</span>

サンプル

上記コードの表示例

bold
big
bold and big
クラスを除去する（Click）

<span class="a" onclick="css.remove_rules(['span.bold, span.bb', 'span.big, span.bb','span.bb']).refresh();">クラスを除去する（Click）</span>

繰り返した画像にCSSを振り分ける

<script type="text/javascript">
 var url = '画像パス', badges = '', hover = '', rules = {};
for(var i = 0; i != 8; i++)
{
    var badge = (badges ? ', ' : '') + 'a#badge_' + i;
    badges += badge;
    hover += badge + ':hover';
    rules['a#badge_' + i] = {
        'background': 'url(' + url + ') -' + (i * 80) + 'px',
        'float': (i < 3 ? 'left' : 'right'),
        'margin': (i < 3 ? '0px 8px 0px 0px' : '0px 0px 0px 8px')
    };
}
rules[badges] = {
    display: 'block',
    opacity: 0.50,
    width: '80px',
    height: '28px'
};
rules[hover] = {
    opacity: 1.00
};
css.add_rules(rules).refresh();
</script>

Javascriptサンプルページ一覧

skuare.net