スタイルシートの制御はブラウザによって挙動が異なります。よってその必要がないならば、インラインスタイルで制御します。
ドキュメントに適用されたスタイルシートにはDocumentのプロパティstyleSheets[]からアクセスでき、CSSStyleSheetオブジェクトで返されます。ただし代替スタイルシートをサポートしていないブラウザのstyleSheets[]には、そのスタイルシートは含まれません。よって確実にスタイルシートにアクセスするには、link要素にid属性を設定し、Document.getElementById()でそれを取得します。
このドキュメントにリンクされたスタイルシート
スタイルシートに格納されている各ルールには、cssRules[] (IEではrules[]) からアクセスできます。
| メソッド | 説明 |
|---|---|
| insertRule | 新しいルールをスタイルシートに挿入する |
| deleteRule | ルールをスタイルシートから削除する |
CSSStyleSheet.disabledプロパティをtrue/falseに設定することで、スタイルシートを無効/有効にできます。これを利用すれば、代替スタイルシートの変更をプログラムから行えます。
| 値 | 状態 |
|---|---|
true |
スタイルシートは無効で、ドキュメントに適用されない |
false |
スタイルシートは有効で、ドキュメントに適用される |
代替スタイルシートとして読み込んだ場合、ブラウザによってdisabledプロパティの初期値が異なります。IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため、代替スタイルシートを読み込んだ時点で明示的にtrueにする処理が必要です。
styleSheet.disabled = false; // IEなどではスタイルシートは有効とならない。
styleSheet.disabled = true; // あらかじめ無効に設定することで、 styleSheet.disabled = false; // 有効の設定が機能する。
有効にするスタイルシートをチェックしてください。
link要素を作成し、それをhead要素に追加します。
var link = document.createElement( 'link' ); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'sample.css'; document.getElementsByTagName( 'head' )[ 0 ].appendChild( link );html - How to load up CSS files using Javascript? - Stack Overflow
ドキュメントのstyle要素へは、HTMLElement同様にアクセスできます。ただしIE10より前はstyle要素へTextオブジェクトを追加できないため、styleSheetプロパティを介して文字列として設定します。html - How to create a <style> tag with Javascript - Stack Overflow
var style = document.createElement( 'style' );
style.type = 'text/css';
if( 'styleSheet' in style )
{
// IE10より前 向け
style.styleSheet.cssText = 'body{color:red} p{background-color:blue}';
var head = document.getElementsByTagName( 'head' )[ 0 ];
head.appendChild( style );
}
else
{
// 主要なブラウザ向け
style.appendChild( document.createTextNode( 'body{color:red}' ) );
style.appendChild( document.createTextNode( 'p{background-color:blue}' ) );
document.head.appendChild( style );
}
if( style.sheet )
{
alert( style.sheet.cssRules[0].cssText ); // "body { color: red; }"
alert( style.sheet.cssRules[0].selectorText ); // "body"
alert( style.sheet.cssRules[0].style.color ); // "red"
}
要素のスタイルへは、HTMLElement.styleプロパティからアクセスできます。このプロパティはCSSStyleDeclarationオブジェクトであり、文字列ではありません。またこのプロパティは要素のstyle属性を表すものであり、その要素のインラインスタイルで指定したものしか反映しません。つまりスタイルシートで指定されたスタイルの情報は、取得できません。
var p = document.createElement( 'p' ); p.style.color = 'red'; p.style.fontWeight = 'bold'; // プロパティ名に注意：font-weight → fontWeight p.style.margin = '10px'; // 数値も文字列で指定
ブラウザによっては、p.style = 'color:red';のような文字列による指定を解釈するものもあります。たとえばFirefoxがそれですが、これは標準的な方法ではありません。
要素に適用される実際のスタイルを、文字列で表します。たとえば前述の例では、
alert( p.style.cssText );
// color: red; font-weight: bold; margin: 10px;
のように文字列で返されます。逆にこのプロパティから設定することで、CSSの命名規則のまま一括してスタイルを指定することもできます。CSSRule.cssText - Web API Interfaces | MDN
ElementのsetAttribute()、getAttribute()も属性を文字列として扱うため、CSSRule.cssText同様に処理できます。
p.setAttribute( 'style', 'font-weight:bold' ); alert( p.getAttribute( 'style' ) ); // "font-weight:bold" alert( p.style.fontWeight ); // "bold"
基本的に、CSSの属性名がそのままプロパティ名となります。ただしJavaScriptの識別子の規則に違反する属性名は、次の規則でプロパティ名が変更されます。
要素に設定したスタイルは、それに空文字を設定することで削除できます。how to remove css property using javascript? - Stack Overflow
p.style.color = '';
こうすることで、
<p style="color:red"></p>
のHTMLは、
<p style=""></p>
となります。
ただしこの方法で削除できるのは、styleプロパティなどインラインスタイルで設定されたスタイルのみで、スタイルシートで設定されたそれは削除できません。