こんにちは、
CSSとJavaScript
JavaScriptからCSSを扱うとは、
- styleプロパティの操作
- class名の操作
- CSS自体の操作
では、
styleプロパティの操作
要素のstyleプロパティを直接操作する方法は、
var div = document.getElementById('css-sample1');
div.style.fontSize = '20px';
div.style.color = 'white';
div.style.backgroundColor = '#444';
div.style.width = '100px';
div.style.padding = '10px';なお、
var div = document.getElementById('css-sample1');
var style = div.style;
style.fontSize = '20px';
style.color = 'white';
style.backgroundColor = '#444';
style.width = '100px';
style.padding = '10px';なお、
なお、
function camelize(prop){
return prop.replace(/-([a-z])/g, function(m, m1){
return m1.toUpperCase();
});
}
camelize('font-size'); // fontSize
camelize('-moz-border-radius'); // MozBorderRadius正規表現でハイフンの次の文字をキャプチャしておき、
function camelize(prop){
return prop.replace(/-[a-z]/g, function(m){
return m.charAt(1).toUpperCase();
});
}
camelize('font-size'); // fontSize
camelize('-moz-border-radius'); // MozBorderRadius-moz-border-radiusのように、
ベンダー接頭辞付きのスタイルのサポートが切られたケースとして、
あくまで、
styleプロパティが存在するか確認する方法
上記でFirefox 3.
if('opacity' in style){
style.opacity = 0.5;
} else/* if('filter' in style) */{
style.filter = 'alpha(opacity=50)';
}このように、
なお、
var setOpacity = function(elem, value){
elem.style.opacity = value;
};
if(!('opacity' in document.documentElement.style)){
setOpacity = function(elem, value){
elem.style.filter = 'alpha(opacity='+value*100+')';
};
}
setOpacity(document.body, 0.5);特に、
なお、
複数のスタイルを一度に適用する方法
ひとつの要素に対して、
var div = document.getElementById('css-sample2');
div.setAttribute('style','font-size:20px;color:white;background-color:#444;width:100px;padding:10px;');ただし、
var div = document.getElementById('css-sample2');
div.style.cssText='font-size:20px;color:white;background-color:#444;width:100px;padding:10px;';cssTextを使う方法はIE 6やSafari 3などを含めてクロスブラウザで動作しますし、
class名によるスタイルの操作
スタイルを操作する方法として要素のクラス名を変更する方法も一般的です。こちらは1つの操作で複数の要素のスタイルに影響を与えることが可能なため、
<style>
.css-sample3 div{
font-size:20px;
color:white;
background-color:#444;
width:100px;
padding:10px;
margin:5px;
}
</style>
<div id="css-sample3">
<div>サンプル1</div>
<div>サンプル2</div>
<div>サンプル3</div>
</div>
<script>
(function(){
var btn = document.getElementById('css-sample3-btn');
var div = document.getElementById('css-sample3');
btn.onclick = function (){
div.className = 'css-sample3';
};
})();
</script>このように、
この方法は一見効率的に見えますが、
さらには、
なお、
要素のスタイルを取得
続いて、
if(!window.getComputedStyle){
window.getComputedStyle = document.defaultView.getComputedStyle;
}
var style = getComputedStyle(document.body, '');
console.log(style, style.fontSize);getComputedStyleの第二引数はbefore、 afterなどの擬似要素のスタイルを取得する場合に使用します。それ以外は空文字列を渡します
ほとんどのブラウザでgetComputedStyleはwindowオブジェクト
これに対して、
var style = document.body.currentStyle;
alert([style, style.fontSize]);ではこれをクロスブラウザにしてみます。
if(!window.getComputedStyle){
if (document.defaultView){
getComputedStyle = document.defaultView.getComputedStyle;
} else if(document.documentElement) {
getComputedStyle = function(element){
return element.currentStyle;
};
}
}
var style = getComputedStyle(document.body, '');
console.log(style, style.fontSize);このように、
var style = element.currentStyle || document.defaultView.getComputedStyle(element,'')なお、
また、
CSSのルールの操作
ここまでに紹介した方法は要素自体を操作してスタイルを変更・
このルールの操作方法はDOM Level 2 Styleで定義されており、
CSSのルールを操作するうえで最初に必要なのはStyleSheetオブジェクトの取得です。ルールの操作はStyleSheetオブジェクトに対して行うので、
ただし、
このため、
var style = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
var sheet = style.sheet;では、
sheet.insertRule('p{color:red;}', sheet.cssRules.length);このように、
なお、
続いて、
var sheet = document.createStyleSheet();このように、
sheet.addRule('p', 'color:red;');こちらは第一引数でセレクタを、
では、
function addRule(selector, style){
var sheet;
if(!addRule.add){
if (document.createStyleSheet){
sheet = document.createStyleSheet();
addRule.add = function(selector, style){
return sheet.addRule(selector, style);
};
} else {
var style = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
sheet = style.sheet;
addRule.add = function(selector, style){
return sheet.insertRule(selector+'{'+style+'}', sheet.cssRules.length);
};
}
// 追加したスタイルを無効化する関数
addRule.disable = function(){
return sheet.disabled = true;
};
addRule.enable = function(){
return sheet.disabled = false;
};
}
// addRuleが引数ありで呼び出されたかチェック
if (arguments.length){
return addRule.add(selector, style);
} else {
return addRule;
}
}初回呼び出し時にaddRule関数のプロパティとしてadd, disable, enableというメソッドを追加しています。なお、
addRule().add('p','font-size:120%;');
addRule('p','color:black;');
addRule.add('p','font-weight:bold;');
addRule.disable();// 上記のスタイルを無効化ちなみに、
さらにおまけで、
CSSの動的な生成
最後に、
<div class="css-sample4">
<div>サンプル1</div>
<div>サンプル2</div>
<div>サンプル3</div>
</div>
<script>
(function(){
var btn = document.getElementById('css-sample4-btn');
btn.onclick = function (){
var css = '.css-sample4 div{'+
' font-size:20px;'+
' color:white;'+
' background-color:#444;'+
' width:100px;'+
' padding:10px;'+
' margin:5px;'+
'}';
if(document.createStyleSheet){
var sheet = document.createStyleSheet();
sheet.cssText = css;
} else {
var style = document.createElement('style');
style.textContent = css;
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
};
})();
</script>上記の通り、
まとめ
今回はCSSをJavaScriptから操作する方法を紹介しました。DOM Level 2に相当する部分のため、
次回はいよいよXMLHttpRequestやJSONPなどの非同期処理を取り上げる予定です。