styleプロパティでスタイルの取得/設定
■ (書式)エレメント.style.プロパティ名 = 値;
・HTMLタグにstyle属性で直接指定されたインライン指定のスタイルを取得。
・Scriptで設定されたスタイルも取得可能。
・<head>内の<style>タグによる設定や、外部CSSファイルでの設定は取得できない。
Sample
Test1
Test2
Test3
Test4
Element.style.colorで文字色を取得してみます
結果は、[Test3]の<head>内の<style type=〜で設定したスタイルは取得できない。
([Test1]を試してください)
JavaScriptで設定したスタイルは取得・設定できる。
[Test1]はスタイル無し
[Test2]はタグ内のstyle属性で"color:red"を設定
[Test3]は<head>内の<style type="text/css">〜</style>で
"color:blue"を設定
[Test4]はページ内のJavaScriptで文字色を設定
Sample Source......................................................................>>>
<style type="text/css">
h2#test3 {color:blue}
</style>
<script type="text/javascript"><!--
function Test(n){
var test = document.getElementById("test" + n);
var c = test.style.color;
alert("文字色は:" + c);
}
function TestA(){
var testA = document.getElementById("test1");
testA.style.color = "magenta";
}
function TestB(){
var testA = document.getElementById("test1");
testA.style.color = "";
}
// --></script>
</head>
<body>
<div style="width:170px;border:1px solid navy;padding:8px">
<h2 id="test1">Test1</h2>
<h2 id="test2" style="color:red">Test2</h2>
<h2 id="test3">Test3</h2>
<h2 id="test4">Test4</h2>
<script type="text/javascript"><!--
document.getElementById("test4").style.color = "green";
// --></script>
</div>
<p>Element.style.colorで文字色を取得してみます
<button onclick="Test(1)">Test1</button><button
onclick="Test(2)">Test2</button>
<button onclick="Test(3)">Test3</button><button
onclick="Test(4)">Test4</button>
<button onclick="TestA()">Test1に色を付ける</button>
<button onclick="TestB()">Test1の色を消す</button>