getAttribute()でstyle属性の各値を参照する

output = main.getAttribute("style")としたあと、output("スタイルシートのプロパティ名")で参照できている。 なお、スタイルシートのbackground-colorのようにハイフン(-)を含む属性は、 backgroundColorとしないと参照できない。また、設定してない属性は何も表示されない。

実行結果

source

<div id="div1" style="width:100px;background-color:red;color:white">
HELLO W3C DOM LEVEL1
</div>

<script language="javascript">
var main = document.getElementById("div1");
var output = main.getAttribute("style");
document.write("<br/>");
document.write("outputは" + output + "<br/>");
document.write("output['width']は" + output['width'] + "<br/>");
document.write("output['backgroundColor']は" + output['backgroundColor'] + "<br/>");
document.write("output['background-color']は" + output['background-color'] + "<br/>");
document.write("output['color']は" + output['color'] + "<br/>");
document.write("output['border']は" + output['border'] + "<br/>");
</script>