ホーム >>> HTML整理ノート

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>