JavaScript プログラミング講座


スタイルシートについて（CSSStyleSheet）



・スタイルシートについて
・スタイルシートを取得する
・スタイルシートにルールを追加する
・スタイルシートからルールを除外する
・スタイルシートからルールを取得する
・スタイルルールからセレクタを取得する
・スタイルルールからスタイル宣言を設定する

前のページに戻る

　

スタイルシートについて

　


■スタイルシートについて （CSSStyleSheet）

　
スタイルシートを使用すると、HTML 文書の見栄え（装飾）を変更することができます。
　
文字の大きさや、背景の色、要素の大きさなど、さまざまな変更が可能です。
　
スタイルシートは、<STYLE> や <LINK> 要素が保有しているデータに相当します。
　
スタイルシートは、<STYLE> や <LINK> 要素の中身に相当する（要素そのものは含まない）

<STYLE type="text/css">
<!--
    
    .test1 {
        color: #f22;
        background: #fcc;
        width:  400px;
        height: 300px;
    }
    
    .test2 {
        font-size: 14px;
        line-height: 1.4em;
    }
    
-->
</STYLE>
　
スタイルシートは、<STYLE> や <LINK> 要素の中身に相当する（要素そのものは含まない）

<LINK rel="stylesheet" type="text/css" href="css/test.css">
　
■ CSSStyleSheet オブジェクトを取得する
　
こちらで解説しています。
　

■スタイルルールについて （CSSStyleRule）

　
セレクタと、スタイル宣言の組み合わせた構文を、スタイルルールと言います。
　
スタイルルールの構文

セレクタ {
	スタイル宣言
}
　
スタイルシートには、複数のスタイルルールを記述する事ができます。
　
スタイルシート内には、複数のスタイルルールを格納する事ができる

<STYLE type="text/css">
<!--

	セレクタ {
		スタイル宣言
	}

	セレクタ {
		スタイル宣言
	}

	セレクタ {
		スタイル宣言
	}

-->
</STYLE>
　
■ CSSStyleRule オブジェクトを取得する
　
こちらで解説しています。
　

■セレクタについて （Selector）

　
セレクタは、エレメント（要素）を、DOM ツリーから選び出すための書式です。
　
Selector API については、こちらで解説しています。
　

■スタイル宣言について （CSSStyleDeclaration）

　
スタイル宣言は、スタイルシートの宣言ブロックの１つ分に相当します。
　
宣言ブロックは、"{" から "}" までの間です。
　
CSSStyleDeclaration は、宣言ブロック１つ分に相当する

.test1 {
	color: #f22;
	background: #fcc;
	width:  400px;
	height: 300px;
}

.test2 {
	font-size: 14px;
	line-height: 1.4em;
}
　
■ CSSStyleDeclaration インターフェースについて
　
こちらで解説しています。
　

■スタイルシート関連のインターフェースの一覧

　
インターフェース 説明
CSSStyleSheetList 複数の「スタイルシート」が格納されたリストです。
CSSRuleList 複数の「スタイルルール」が格納されたリストです。
　
インターフェース 説明
CSSStyleSheet 「スタイルシート」１つ分に相当します。
複数の「スタイルルール」を保持する事ができます。
CSSStyleRule 「スタイルルール」１つ分に相当します。
「セレクタ」と「スタイル宣言」を保持する事ができます。
CSSStyleDeclaration 「スタイル宣言（宣言ブロック）」１つ分に相当します。
複数の「CSS プロパティと値」を管理することができます。
　

上に戻る

　

スタイルシートを取得する

　
■ドキュメントからすべてのスタイルシートを取得する
■ <STYLE> と <LINK> 要素からスタイルシートを取得する
　


■ドキュメントからすべてのスタイルシートを取得する

　
ドキュメントから、すべてのスタイルシートを取得するには、styleSheets プロパティを使用します。
　
styleSheets プロパティから、CSSStyleSheetList オブジェクトが得られます。
　
CSSStyleSheetList オブジェクトは、配列のように中身を取り出せます。
　
CSSStyleSheetList オブジェクトの中には、CSSStyleSheet オブジェクトが格納されています。
　
ドキュメントからすべてのスタイルシートを取得する

<html>
  <head>

    <link rel="stylesheet" type="text/css" href="css/test1.css">
    <link rel="stylesheet" type="text/css" href="css/test2.css">
    <link rel="stylesheet" type="text/css" href="css/test3.css">

    <style type="text/css"> </style>
    <style type="text/css"> </style>
    <style type="text/css"> </style>

  </head>

  <body>

    <script type="text/javascript">
    <!--

	// CSSStyleSheetList オブジェクトを取得する
	var sheet_list = document.styleSheets;

	// スタイルシートの総数を取得
	var num = sheet_list.length;

	// 出力テスト
	var i;
	for(i=0;i < num;i++){

		// CSSStyleSheet オブジェクトを取得する
		var style_sheet = sheet_list[i];

		// 出力テスト
		console.log(style_sheet);
	}

    //-->
    </script>

  </body>
</html>
　

■ <STYLE> と <LINK> 要素からスタイルシートを取得する

　
<STYLE> 要素に該当するのは、HTMLStyleElement オブジェクトです。
　
<LINK> 要素に該当するのは、HTMLLinkElement オブジェクトです。
　
これらの要素から、CSSStyleSheet オブジェクトを取得するには、sheet プロパティを使用します。
　
■ InternetExplorer 8 以前の場合
　
sheet プロパティは、InternetExplorer 8 以前では未対応です。
　
かわりに、styleSheet プロパティを使用します。
　
エレメントから スタイルシートを取得する関数です。
　
エレメントから StyleSheet オブジェクトを取得する関数

// --------------------------------------------------------------------------------
// エレメントから StyleSheet オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function ElementGetStyleSheet(style_sheet){
	if(style_sheet.sheet !== undefined){
		return style_sheet.sheet;
	}else if(style_sheet.styleSheet !== undefined){
		return style_sheet.styleSheet;
	}
	return null;
}
　
■取得例
　
<STYLE> と <LINK> 要素からスタイルシートを取得する

<html>
  <head>

    <style type="text/css" id="aaa"> </style>

    <link rel="stylesheet" type="text/css" href="css/test.css" id="bbb">

  </head>

  <body>

    <script type="text/javascript">
    <!--

	// --------------------------------------------------------------------------------
	// エレメントから StyleSheet オブジェクトを取得する関数
	// --------------------------------------------------------------------------------
	function ElementGetStyleSheet(style_sheet){
		if(style_sheet.sheet !== undefined){
			return style_sheet.sheet;
		}else if(style_sheet.styleSheet !== undefined){
			return style_sheet.styleSheet;
		}
		return null;
	}

	// --------------------------------------------------------------------------------
	// スタイル要素
	// --------------------------------------------------------------------------------
	// id 属性が、"aaa" であるエレメントを取得
	var style_element = document.getElementById("aaa");

	// エレメントから CSSStyleSheet オブジェクトを取得する
	var style_sheet0 = ElementGetStyleSheet(style_element);

	// 出力テスト
	console.log(style_sheet0);

	// --------------------------------------------------------------------------------
	// リンク要素
	// --------------------------------------------------------------------------------
	// id 属性が、"bbb" であるエレメントを取得
	var link_element = document.getElementById("bbb");

	// エレメントから CSSStyleSheet オブジェクトを取得する
	var style_sheet1 = ElementGetStyleSheet(link_element);

	// 出力テスト
	console.log(style_sheet1);

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

スタイルシートにルールを追加する

　


■スタイルシートにルールを追加する

　
スタイルシートにルールを追加するには、insertRule() メソッドを使用します。
　
CSSStyleSheet.insertRule( "スタイルルールのテキスト" , 挿入位置 ) :Number
第01引数 Stringスタイルルールを文字列で指定する。セレクタとスタイル宣言を続けて記述する。
第02引数 Numberルールを挿入する位置を指定する。
戻り値 Number実際に挿入された位置が得られる。
　
■第02引数 ルールを挿入する位置を指定

ルールを挿入する位置を指定します。
　
指定した位置にすでにルールが存在する場合、追加挿入されます。上書きされる事はありません。
　
現在のリストのサイズよりも大きい位置を指定した場合、エラーが発生します。
　
最後尾となる位置を調べたい場合は、CSSRuleList.length プロパティを使用します。
　
マッチするルールが複数存在する場合、大きい位置に存在するルールが優先的に適用されます。
　
■ InternetExplorer 8 以前の場合
　
insertRule() メソッドは、InternetExplorer 8 以前では未対応です。
　
かわりに、addRule() メソッドを使用します。
　
styleSheet.addRule( "セレクタ文字列" , "スタイル文字列" , 挿入位置 ) :Number
第01引数 Stringセレクタを文字列で指定する。
第02引数 Stringスタイル文字列を指定する。{ } は不要。
第03引数(略可)Numberルールを挿入する位置を指定する。省略した場合、最後尾に追加される。
戻り値 Number実際に挿入された位置が得られる。IE7 以前の場合は -1。
　
スタイルシートにルールを追加する関数

// --------------------------------------------------------------------------------
// スタイルシートにルールを追加する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetInsertRule(style_sheet,selector,style,index){
	if(style_sheet.insertRule !== undefined){
		style_sheet.insertRule(selector + "{" + style + "}",index);
	}else if(style_sheet.addRule !== undefined){
		style_sheet.addRule(selector,style,index);
	}
	return index;
}
　
■使用例
　
スタイルシートにルールを追加する

<html>
  <head>

    <style type="text/css" id="aaa"> </style>

  </head>

  <body>

    <div class="my_class">あいうえお</div>

    <script type="text/javascript">
    <!--

	// --------------------------------------------------------------------------------
	// エレメントから StyleSheet オブジェクトを取得する関数
	// --------------------------------------------------------------------------------
	function ElementGetStyleSheet(style_sheet){
		if(style_sheet.sheet !== undefined){
			return style_sheet.sheet;
		}else if(style_sheet.styleSheet !== undefined){
			return style_sheet.styleSheet;
		}
		return null;
	}

	// --------------------------------------------------------------------------------
	// スタイルシートにルールを追加する関数
	// --------------------------------------------------------------------------------
	function CSSStyleSheetInsertRule(style_sheet,selector,style,index){
		if(style_sheet.insertRule !== undefined){
			style_sheet.insertRule(selector + "{" + style + "}",index);
		}else if(style_sheet.addRule !== undefined){
			style_sheet.addRule(selector,style,index);
		}
		return index;
	}


	// --------------------------------------------------------------------------------
	// id 属性が、"aaa" であるエレメントを取得
	// --------------------------------------------------------------------------------
	var style_element = document.getElementById("aaa");

	// --------------------------------------------------------------------------------
	// エレメントから CSSStyleSheet オブジェクトを取得する
	// --------------------------------------------------------------------------------
	var style_sheet = ElementGetStyleSheet(style_element);

	// --------------------------------------------------------------------------------
	// スタイルシートにルールを追加する
	// --------------------------------------------------------------------------------
	CSSStyleSheetInsertRule(style_sheet, ".my_class" , "color: #282; font-size: 32px;" , 0);
	CSSStyleSheetInsertRule(style_sheet, ".my_class" , "border: 10px #4c4 solid;" , 1);
	CSSStyleSheetInsertRule(style_sheet, ".my_class" , "background-color: #cfc; width: 400px; height: 300px;" , 2);

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

スタイルシートからルールを除外する

　


■スタイルシートからルールを除外する

　
スタイルシートからルールを除外するには、deleteRule() メソッドを使用します。
　
CSSStyleSheet.deleteRule( 除去位置 ) :Void
第01引数 String除去したいルールが格納されている位置を指定する。
戻り値 Voidなし。
　
■第02引数 除去したいルールが格納されている位置を指定

除去したいルールが格納されている位置を指定します。
　
ルールを除去した場合、番号が 0 から昇順で割り振り直されます。
　
現在のリストのサイズよりも大きい位置を指定した場合、エラーが発生します。
　
ルールの総数を調べたい場合は、CSSRuleList.length プロパティを使用します。
　
■ InternetExplorer 8 以前の場合
　
deleteRule() メソッドは、InternetExplorer 8 以前では未対応です。
　
かわりに、removeRule() メソッドを使用します。
　
styleSheet.removeRule( 除去位置 ) :Void
第01引数(略可)String除去したいルールが格納されている位置を指定する。省略した場合 0 番目。
戻り値 Voidなし。
　
スタイルシートからルールを除外する関数

// --------------------------------------------------------------------------------
// スタイルシートからルールを除外する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetDeleteRule(style_sheet,index){
	if(style_sheet.deleteRule !== undefined){
		style_sheet.deleteRule(index);
	}else if(style_sheet.removeRule !== undefined){
		style_sheet.removeRule(index);
	}
}
　
■使用例
　
スタイルシートにルールを追加する

<html>
  <head>

    <style type="text/css" id="aaa">
	<!--
	.my_class {
		color: #282; font-size: 32px;
	}

	.my_class {
		border: 10px #4c4 solid;
	}

	.my_class {
		background-color: #cfc; width: 400px; height: 300px;
	}
	-->
    </style>

  </head>

  <body>

     <div class="my_class">あいうえお</div>

    <script type="text/javascript">
    <!--

	// --------------------------------------------------------------------------------
	// エレメントから StyleSheet オブジェクトを取得する関数
	// --------------------------------------------------------------------------------
	function ElementGetStyleSheet(style_sheet){
		if(style_sheet.sheet !== undefined){
			return style_sheet.sheet;
		}else if(style_sheet.styleSheet !== undefined){
			return style_sheet.styleSheet;
		}
		return null;
	}

	// --------------------------------------------------------------------------------
	// スタイルシートからルールを除外する関数
	// --------------------------------------------------------------------------------
	function CSSStyleSheetDeleteRule(style_sheet,index){
		if(style_sheet.deleteRule !== undefined){
			style_sheet.deleteRule(index);
		}else if(style_sheet.removeRule !== undefined){
			style_sheet.removeRule(index);
		}
	}


	// --------------------------------------------------------------------------------
	// id 属性が、"aaa" であるエレメントを取得
	// --------------------------------------------------------------------------------
	var style_element = document.getElementById("aaa");

	// --------------------------------------------------------------------------------
	// エレメントから CSSStyleSheet オブジェクトを取得する
	// --------------------------------------------------------------------------------
	var style_sheet = ElementGetStyleSheet(style_element);

	// --------------------------------------------------------------------------------
	// スタイルシートからルールを除外する
	// --------------------------------------------------------------------------------
	CSSStyleSheetDeleteRule(style_sheet,1);

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

スタイルシートからルールを取得する

　


■スタイルシートからルールを取得する

　
スタイルシートから、すべてのルールを取得するには、cssRules プロパティを使用します。
　
cssRules プロパティから、CSSRuleList オブジェクトが得られます。
　
<LINK> 要素を使用している場合、エラーが発生したり、null 値が得られる事があります。
　
■ CSSRuleList オブジェクトについて
　
CSSRuleList オブジェクトは、配列のように中身を取り出せます。
　
CSSRuleList オブジェクトの中には、CSSStyleRule オブジェクトが格納されています。
　
■ <LINK> 要素のセキュリティについて
　
CSS ファイルを外部から読み込んでいる場合、生成元（オリジン）が一致している必要があります。
　
オリジンが一致しない場合、cssRules プロパティから null 値が得られます。
　
ブラウザによっては、エラーが発生します。
　
オリジンが一致しない場合、ルールを取得する事ができません。
　
ただし、ルールの追加と、追加した分の除外は可能です。
　
■ InternetExplorer 8 以前の場合
　
cssRules プロパティは、InternetExplorer 8 以前では未対応です。
　
かわりに、rules プロパティを使用します。
　
スタイルシートから CSSRuleList オブジェクトを取得する関数です。
　
スタイルシートから CSSRuleList オブジェクトを取得する関数

// --------------------------------------------------------------------------------
// スタイルシートから CSSRuleList オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetGetCSSRuleList(style_sheet){
	try{
		if(style_sheet.cssRules !== undefined){
			return style_sheet.cssRules;
		}else if(style_sheet.rules !== undefined){
			return style_sheet.rules;
		}
	}catch(e){
	}
	return null;
}
　
■取得例
　
ドキュメント内のすべてのスタイルシートとルールを取得する

<html>
  <head>

    <link rel="stylesheet" type="text/css" href="css/test1.css">
    <link rel="stylesheet" type="text/css" href="css/test2.css">
    <link rel="stylesheet" type="text/css" href="css/test3.css">

    <style type="text/css">
	<!--
	#aaa { color: #822; font-size: 32px; }
	-->
    </style>

    <style type="text/css">
	<!--
	.bbb { border: 10px #4c4 solid; }
	[name="ccc"] { width:400px; height:300px; }
	-->
    </style>

  </head>

  <body>

    <script type="text/javascript">
    <!--

	// --------------------------------------------------------------------------------
	// スタイルシートから CSSRuleList オブジェクトを取得する関数
	// --------------------------------------------------------------------------------
	function CSSStyleSheetGetCSSRuleList(style_sheet){
		try{
			if(style_sheet.cssRules !== undefined){
				return style_sheet.cssRules;
			}else if(style_sheet.rules !== undefined){
				return style_sheet.rules;
			}
		}catch(e){
		}
		return null;
	}

	// ------------------------------------------------------------
	// スタイルシートを取得する
	// ------------------------------------------------------------
	// CSSStyleSheetList オブジェクトを取得する
	var sheet_list = document.styleSheets;

	// スタイルシートの総数を取得
	var style_sheet_num = sheet_list.length;

	var i;
	for(i=0;i < style_sheet_num;i++){

		// CSSStyleSheet オブジェクトを取得する
		var style_sheet = sheet_list[i];

		// 出力テスト
		console.log("StyleSheet:" + i);


		// ------------------------------------------------------------
		// スタイルルールを取得する
		// ------------------------------------------------------------
		var rule_list = CSSStyleSheetGetCSSRuleList(style_sheet);
		if(rule_list){

			// スタイルルールの総数を取得
			var rule_num = rule_list.length;

			var j;
			for(j=0;j < rule_num;j++){

				// CSSStyleRule オブジェクトを取得する
				var style_rule = rule_list[j];

				// 出力テスト
				console.log("\tStyleRule:" + j);
				console.log("\t\tselector:" + style_rule.selectorText);
				console.log("\t\tstyle:" + style_rule.style.cssText);
			}
		}
	}

    //-->
    </script>

  </body>
</html>
　

上に戻る

　

スタイルルールからセレクタを取得する

　


■スタイルルールからセレクタを取得する

　
スタイルルールから、セレクタ文字列を取得するには、selectorText プロパティを使用します。
　
一部のブラウザでは、selectorText プロパティへの書き込みに対応しています。
　
スタイルルールから、セレクタを取得する

// --------------------------------------------------------------------------------
// エレメントから StyleSheet オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function ElementGetStyleSheet(style_sheet){
	if(style_sheet.sheet !== undefined){
		return style_sheet.sheet;
	}else if(style_sheet.styleSheet !== undefined){
		return style_sheet.styleSheet;
	}
	return null;
}

// --------------------------------------------------------------------------------
// スタイルシートにルールを追加する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetInsertRule(style_sheet,selector,style,index){
	if(style_sheet.insertRule !== undefined){
		style_sheet.insertRule(selector + "{" + style + "}",index);
	}else if(style_sheet.addRule !== undefined){
		style_sheet.addRule(selector,style,index);
	}
	return index;
}

// --------------------------------------------------------------------------------
// スタイルシートから CSSRuleList オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetGetCSSRuleList(style_sheet){
	try{
		if(style_sheet.cssRules !== undefined){
			return style_sheet.cssRules;
		}else if(style_sheet.rules !== undefined){
			return style_sheet.rules;
		}
	}catch(e){
	}
	return null;
}

// ------------------------------------------------------------
// スタイル要素
// ------------------------------------------------------------
// HTMLStyleElement オブジェクトを作成する
var style_element = document.createElement("style");

// BODY のノードリストに登録する
document.body.appendChild(style_element);


// ------------------------------------------------------------
// スタイルルールを 0 番目に追加する
// ------------------------------------------------------------
// エレメントから CSSStyleSheet オブジェクトを取得する
var style_sheet = ElementGetStyleSheet(style_element);

// スタイルシートにルールを追加する
CSSStyleSheetInsertRule(style_sheet , "#test" , "color: #282; font-size: 32px;" , 0);


// ------------------------------------------------------------
// 0 番目のスタイルルールを取得する
// ------------------------------------------------------------
// CSSRuleList オブジェクトを取得する
var rule_list = CSSStyleSheetGetCSSRuleList(style_sheet);

// 0 番目のルールを取得する
var style_rule = rule_list[0];


// ------------------------------------------------------------
// スタイルルールから、セレクタ文字列を取得する
// ------------------------------------------------------------
// スタイルルールから、セレクタ文字列を取得する
var selector_text = style_rule.selectorText;

// 出力テスト
console.log(selector_text); // #test
　

上に戻る

　

スタイルルールからスタイル宣言を設定する

　


■スタイルルールからスタイル宣言を設定する

　
スタイルルールから、CSSStyleDeclaration オブジェクトを取得するには、style プロパティを使用します。
　
CSSStyleDeclaration オブジェクトの使い方については、こちらで解説しています。
　
スタイルルールから、スタイル宣言を設定する

// --------------------------------------------------------------------------------
// エレメントから StyleSheet オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function ElementGetStyleSheet(style_sheet){
	if(style_sheet.sheet !== undefined){
		return style_sheet.sheet;
	}else if(style_sheet.styleSheet !== undefined){
		return style_sheet.styleSheet;
	}
	return null;
}

// --------------------------------------------------------------------------------
// スタイルシートにルールを追加する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetInsertRule(style_sheet,selector,style,index){
	if(style_sheet.insertRule !== undefined){
		style_sheet.insertRule(selector + "{" + style + "}",index);
	}else if(style_sheet.addRule !== undefined){
		style_sheet.addRule(selector,style,index);
	}
	return index;
}

// --------------------------------------------------------------------------------
// スタイルシートから CSSRuleList オブジェクトを取得する関数
// --------------------------------------------------------------------------------
function CSSStyleSheetGetCSSRuleList(style_sheet){
	try{
		if(style_sheet.cssRules !== undefined){
			return style_sheet.cssRules;
		}else if(style_sheet.rules !== undefined){
			return style_sheet.rules;
		}
	}catch(e){
	}
	return null;
}

// ------------------------------------------------------------
// スタイル要素
// ------------------------------------------------------------
// HTMLStyleElement オブジェクトを作成する
var style_element = document.createElement("style");

// BODY のノードリストに登録する
document.body.appendChild(style_element);

// ------------------------------------------------------------
// スタイルルールを 0 番目に追加する
// ------------------------------------------------------------
// エレメントから CSSStyleSheet オブジェクトを取得する
var style_sheet = ElementGetStyleSheet(style_element);

// スタイルシートにルールを追加する
CSSStyleSheetInsertRule(style_sheet , "*" , "position:static;" , 0);

// ------------------------------------------------------------
// 0 番目のスタイルルールを取得する
// ------------------------------------------------------------
// CSSRuleList オブジェクトを取得する
var rule_list = CSSStyleSheetGetCSSRuleList(style_sheet);

// 0 番目のルールを取得する
var style_rule = rule_list[0];


// ------------------------------------------------------------
// スタイルルールから、CSSStyleDeclaration オブジェクトを取得
// ------------------------------------------------------------
var style = style_rule.style;

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
// setProperty メソッドが利用可能
if(style.setProperty){
	style.setProperty("color", "#282");
	style.setProperty("font-size", "32px");
	style.setProperty("border", "10px #4c4 solid");
	style.setProperty("background-color", "#cfc");
	style.setProperty("width", "400px");
	style.setProperty("height", "300px");
}else{
	style.color = "#282";
	style.fontSize = "32px";
	style.border = "10px #4c4 solid";
	style.backgroundColor = "#cfc";
	style.width = "400px";
	style.height = "300px";
}

// ------------------------------------------------------------
// スタイルの値を取得する
// ------------------------------------------------------------
// getPropertyValue メソッドが利用可能
if(style.getPropertyValue){
	console.log(style.getPropertyValue("color"));
	console.log(style.getPropertyValue("font-size"));
	console.log(style.getPropertyValue("border"));
	console.log(style.getPropertyValue("background-color"));
	console.log(style.getPropertyValue("width"));
	console.log(style.getPropertyValue("height"));
}else{
	console.log(style.color);
	console.log(style.fontSize);
	console.log(style.border);
	console.log(style.backgroundColor);
	console.log(style.width);
	console.log(style.height);
}

// ------------------------------------------------------------
// スタイルを除去する
// ------------------------------------------------------------
// removeProperty メソッドが利用可能
if(style.removeProperty){
	style.removeProperty("color");
	style.removeProperty("font-size");
	style.removeProperty("border");
	style.removeProperty("background-color");
	style.removeProperty("width");
	style.removeProperty("height");
}
　

上に戻る

　
前のページに戻る