DOMでスタイルシートを操作

スタイルを変更

  • 要素に対してJavaScriptでCSSのスタイルを変更します
要素 . style . プロパティ = 値;


文字色

#myid {color: #ff0000;}

document.getElementById( 'myid' ).style.color = '#ff0000';


背景色

#myid {background-color: #ffffff;}

document.getElementById( 'myid' ).style.backgroundColor = '#ffffff';


CSSのプロパティに「-」が入る場合は、取り除き次の単語の頭文字を大文字にして記述します。（キャメルケース）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMで文字色を設定</title>
</head>
<body>
<h1 id="myid">DOMによる要素の指定</h1>
<script>
  document.getElementById( 'myid' ).style.color = '#ff0000';
</script>
</body>
</html>

スタイルシートの操作

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMによるおみくじ</title>
<style>
body, div, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  text-align: center;
  background-color: #FFF;
  padding-top: 50px;
}
#myArea {
  background: #F0F0F0;
  margin: 0 auto;
  width: 600px;
  line-height: 120px;
}
#myArea h1 {
  font-size: 36px;
  color: #390;
}
#myArea h1.today {
  color: #000;
}
#myArea h4 {
  color: #F00;
}
</style>
</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">
<h1 class="today">今日はどんな運勢でしょう？</h1>
</div>
<script>
var kuji = new Array(4);
kuji[0] = '<h1 style="color:white">大吉</h1>';
kuji[1] = '<h2 style="color:yellow">中吉</h2>';
kuji[2] = '<h3>小吉</h3>';
kuji[3] = '<h4 style="color:red">凶</h4>';

function unsei(){
	var myArea = document.getElementById('myArea');
	var num = Math.floor(kuji.length * Math.random());
	myArea.innerHTML = kuji[num];
	myArea.style.textAlign = 'center';
	myArea.style.backgroundImage = 'url(img/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>
</body>
</html>
スタイルシートの設定

styleプロパティ

  • DOMではスタイルシートのプロパティは、各ノードのstyleプロパティの下に個別に格納されています
  • ID名が「myArea」のdiv要素のノードを取得
var myArea = document.getElementById('myArea');
  • テキストの配置を設定する「textAlign」プロパティを「center」に設定
myArea.style.textAlign = 'center';
  • DOMでは「backgroundImage」で記述します
myArea.style.backgroundImage = 'url(img/back.jpg)';

visibilityプロパティ

  • 「visibility」プロパティは、エレメントの表示／非表示を切り替えるプロパティ
  • 「hidden」を代入すれば非表示になり、visibleを代入すれば表示されます
myArea.style.visibility = 'hidden';

myArea.style.visibility = 'visible';

showHide関数

<script>
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>
  • 現在の表示／非表示の状況を表す変数「visible」を用意し、初期値として表示状態であることを示す「true」を代入しています
  • 「showHide関数」では、表示エリアのノードを取得し、変数「myArea」に代入しています
  • 同様に、ボタンのノードを変数「btn」に格納しています
  • if文では、変数「visible」の状態に応じて表示／非表示を切り替えています
  • ボタンノードのvalueプロパティは、ボタンのラベルとして表示するテキストです
  • 「!」は、否定を表す演算子です


「!」演算子によって、visibleの値が「true」であれば「false」、「false」であれば「true」に切り替わります。


スタイルシートの主なプロパティ

プロパティ 説明
backgroundColor 背景色
backgroundImage 背景画像
borderWidth 枠の太さ
borderColor 枠の色
color 文字色
display 表示／非表示（レイアウトが変更される）
fontFamily フォント名
fontSize 文字のサイズ
fontWeight 文字の太さ
height コンテンツの高さ
left 左端の座標
lineHeight 行の高さ
margin マージン
padding パディング
position 要素の配置方法
textAlign テキストの配置方法
top 上端の座標
visibility 表示／非表示（レイアウトは変更されない）
width コンテンツの幅


複数のスタイルをまとめる

document.getElementById( 'myID' ).style.color = '#ff0000';
document.getElementById( 'myID' ).style.backgroundColor = '#ffffff';
document.getElementById( 'myID' ).style.width = '300px';
document.getElementById( 'myID' ).style.height = '100px';

変数を使って書き直します。

myElement = document.getElementById( 'myID' ); //変数の定義
myElement.style.color = '#ff0000';
myElement.style.backgroundColor = '#ffffff';
myElement.style.width = '300px';
myElement.style.height = '100px';

さらに簡略化できます。

myStyle = document.getElementById( 'myID' ).style; //変数の定義
myStyle.color = '#ff0000';
myStyle.backgroundColor = '#ffffff';
myStyle.width = '300px';
myStyle.height = '100px';

以下のような記述も可能です。

myHeader = document.getElementById( 'header' ).style;
myFooter = document.getElementById( 'footer' ).style;
myParam = '800px';
myHeader.width = myParam;
myFooter.width = myParam;

まとめ

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