内容へ移動
Cat Paw Software
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
javascript:css
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== JavaScriptでCSS操作 ====== ===== 動的にCSSを追加するには ===== HTMLエレメントを取得してstyleで設定 <code javascript> var e = document.getElementById("hoge"); e.style.backgroundColor = "#CCCCCC"; </code> ===== 複数の要素にまとめて適用させるには ===== CSSStyleSheetを動的に作る <code javascript> var style = document.createElement("style"); style.setAttribute("type", "text/css"); style.appendChild(document.createTextNode("")); document.getElementsByTagName("head")[0].appendChild(style); var sheet = style.sheet; // sheet.addRule(".clazzName { color: blue; }"); // IE? sheet.insertRule(".clazzName { color: blue; }", sheet.cssRules.length); </code> クラス化すると楽かも(要prototype.js) <code javascript> var DynamicCSS = Class.create(); DynamicCSS.prototype = { initialize: function() { var style = document.createElement("style"); style.setAttribute("type", "text/css"); style.appendChild(document.createTextNode("")); document.getElementsByTagName("head")[0].appendChild(style); this.sheet = style.sheet; }, appendRule: function(selector, rules) { r= new Array(); for (var i in rules) { if (rules.hasOwnProperty(i)) { r.push(i + ":" + rules[i]); } } rule = r.join(";"); if (this.sheet.addRule) { this.sheet.addRule(selector + "{" + rule + ";}"); } else { this.sheet.insertRule(selector + "{" + rule + ";}", this.sheet.cssRules.length); } } }; </code> 参考:[[http://d.hatena.ne.jp/amachang/20070703/1183445387|Safari で CSSStyleSheet オブジェクトを生成する方法 - IT戦記]]
javascript/css.txt
· 最終更新:
2008/01/18 02:15
by
127.0.0.1
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ