スタイルシートの操作

スタイルシートを動的に変更する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMによるおみくじ</title>
<style>
body {
  text-align: center;
}
#myArea {
  width: 500px;
  margin: 20px auto;
  padding: 8px;
  background: #F60;
  color: #FFF;
  font-size: 200%;
}
p {
  margin: 0;
  padding: 0;
}
</style>
<script>
var kuji = new Array(4);
kuji[0] = "大吉";
kuji[1] = "中吉";
kuji[2] = "小吉";
kuji[3] = "凶";

function unsei(){
  var myArea = document.getElementById('myArea');
  var num = Math.floor(kuji.length * Math.random());
  myArea.innerHTML = kuji[num];
  myArea.style.textAlign = 'left';
  myArea.style.backgroundImage = 'url(images/back.jpg)';
}

var visible = true;
function showHide(){
  var myArea = document.getElementById('myArea');
  var btn = document.getElementById('showBtn');
  if (visible) {
    myArea.style.visibility = 'hidden';
      btn.value = '表示する';
  } else {
  myArea.style.visibility = 'visible';
    btn.value = '隠す';
  }
    visible = !visible;
}
</script>
</head>
<body>
<h1>今日の運勢</h1>
<form>
<p>
<input type="button" value="占う" onclick="unsei();">
<input type="button" id="showBtn" value="隠す" onclick="showHide();">	
</p>
</form>
<div id="myArea">
<p>今日はどんな運勢でしょう？</p>
</div>
</body>
</html>

まとめ

  • スタイルシートのプロパティは、各ノードの「style.プロパティ名」で設定する
  • textAlignプロパティ：テキストの配置を設定する
  • backgroundImageプロパティ：背景画像を設定する
  • visibilityプロパティ：表示・非表示を切り替える