ボタンをクリックすると、h1スタイルの情報を参照したり変更できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>DOMを利用してスタイルシートの情報を参照、設定したい</title>
<style type="text/css">
<!--
body { background-color:#ddffff; }
#h2id1 { background-color:blue; color:white; }
-->
</style>
<script type="text/JavaScript">
<!--
var flg = 1;
function disp(){
alert("■h2id1の情報＝＝＝＝\ncolor = "+document.getElementById("h2id1").style.color+"\n"+
"backgroundColor = "+document.getElementById("h2id1").style.backgroundColor+"\n\n"+
"■h2id2の情報＝＝＝＝\ncolor = "+document.getElementById("h2id2").style.color+"\n"+
"backgroundColor = "+document.getElementById("h2id2").style.backgroundColor);
}
function style_chg(){
if (flg == 1) {
flg = 2;
document.getElementById("h2id1").style.backgroundColor = "green";
document.getElementById("h2id1").style.color = "yellow";
} else {
flg = 1;
document.getElementById("h2id1").style.backgroundColor = "blue";
document.getElementById("h2id1").style.color = "white";
}
}
// -->
</script>
</head>
<body>
<p>ボタンをクリックすると、h1スタイルの情報を参照したり変更できます。</p>
<form><input type="button" value="h2id1とh2id2のスタイル情報を表示" onclick="disp()">
<input type="button" value="h2id1のスタイルを変更" onclick="style_chg()"></form>
<hr>
<h2 id="h2id1">h2id1のスタイルです。</h2>
<h2 id="h2id2" style="background-color:blue; color:white;">h2id2のスタイルです。</h2>
<hr>
</body>
</html>