2014-11-18

スタイルを変更

要素に対して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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>DOMで文字色を設定</title>
</head>
<body>
<h1id="myid">DOMによる要素の指定</h1>
<script>
document.getElementById('myid').style.color = '#ff0000';
</script>
</body>
</html>

スタイルシートの操作

DOMを使用すると、スタイルシートのプロパティをコントロールできます

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="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>
<inputtype="button"value="占う"onclick="unsei()">
<inputtype="button"id="showBtn"value="隠す"onclick="showHide()">	
</p></form>
<divid="myArea">
<h1class="today">今日はどんな運勢でしょう？</h1>
</div>
<script>
var kuji = newArray(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;

特定のタイミングで実行したいスクリプトをまとめる

関数：function

function myidEvent() {
    alert( '押されました' );
}

myidEvent() という名前でスクリプトをグループ化しました。

特定のイベントに関連づける

HTML内に各要素の属性のonClickなどイベント用の属性に記述する
DOMで取得した要素のonClickなどのプロパティに記述する
DOMでaddListenerを使う

1. HTML内に属性としてonClick時に定義した関数を呼ぶ

<p onClick="myidEvent();">テスト</p>

この「テスト」という文字をクリックされたときにfunctionで定義した関数「myidEvent() 」の内容が実行されます。

【記述例】

この例では、HTMLの要素内にスクリプトを記述しているため振る舞いと文書構造が分離できません。

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>イベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<ponClick="myidEvent();">テスト</p>
<script>
function myidEvent(){
alert('押されました');
}
</script>
</body>
</html>

【記述例】

DOMを使い書き換えてみます。

「getElementById()」メソッドは、HTMLが読み込まれた後に実行する必要があります。

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<pid="myID">テスト</p>
<script>
function myidEvent(){
alert('押されました');
}
document.getElementById('myID').onclick = myidEvent;
</script>
</body>
</html>

window.onloadを利用する

HTMLの下のほうに記述することはメンテナンスの上でも不都合です。
外部ファイルとして「.js」ファイルを読み込む場合も同じです。

ページが読み込まれた際に命令が実行されるようにする

《HTML》

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
<scriptsrc="dom_click.js"></script>
</head>
<body>
<pid="myID">テスト</p>
</body>
</html>

《外部JSファイル》

window.onload = function(){
    document.getElementById( 'myID' ).onclick = myidEvent;
}
function myidEvent() {
    alert( '押されました' );
}

まとめ

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

スタイルの変更とイベントと実行タイミング