スタイルシートを操作しよう
DOMを使うと、Javascriptのプログラムからスタイルシートのプロパティを動的に変更する事が可能になる。
【開発環境】
OS；Window10
Webブラウザ：Google Chrome
テキストエディタ：Brackets
◆スタイルシートのプロパティを設定する
スタイルシートのプロパティは、エレメントオブジェクトのstyleプロパティからアクセスできる。
書式
エレメント.style.スタイルシートのプロパティ
例
title.style.textAling = "right";
・テキストの配置を設定してみる
サンプルプログラム「style1.html」
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
//スタイルシートタグ
＜style＞
//css
#main {
width: 700px;
margin: 0 auto;
position: relative;
}
＜/style＞
＜/head＞
＜body＞
//グループ化
＜div id="main"＞
＜h1 id="header1"＞テキストの配置＜/h1＞
＜p＞
＜input type="radio" name="align" value="left" checked="checked"＞左寄せ
＜input type="radio" name="align" value="center"＞中央寄せ
＜input type="radio" name="align" value="right"＞右寄せ
＜/p＞
＜/div＞
＜script＞
//リスナー関数
function setAlign(e){
var h1 = document.getElementById("header1");
//イベントターゲットの値をh1エレメントのstyle.textAlign に代入
h1.style.textAlign = e.target.value;
}
//name属性を指定してノードを取得します。
//ラジオボタンなどの要素を取得し、配列としてradiosに代入する。
var radios = document.getElementsByName("align");
//配列radiosからaddEventListenerメソッドでリスナー関数に渡す
//lengthプロパティは配列数を取得する
for (var i = 0; i ＜ radios.length; i++) {
radios[i].addEventListener("click", setAlign, false);
}
＜/script＞
＜/body＞
＜/html＞
注1）
HTMLのid属性とname属性の違い
フォームの送信時に発生するPOSTまたはGET呼び出しで使用される識別子であるフォームコントロール（ <input>や<select> ）にname属性を使用します。
特定のHTML要素にCSS、JavaScript、またはフラグメント識別子を指定する必要があるときはいつでも、 id属性を使用します。 名前で要素を検索することも可能ですが、IDで検索する方が簡単で信頼性が高くなります
・スタイルシートのプロパティ
◆イメージをクリックした位置に移動するには
・Webブラウザの座標と、その位置
Webブラウザの座標は、左上隅を（0、0）とする。クリックした位置の座標は、イベントオブジェクトのclientXプロパティ,clientYプロパティで取得できる。
・サンプルプログラム「movelmage1.html」
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜style＞
//CSS
#myImage {
width: 180px;←エレメントの幅
height: 90px;←エレメントの高さ
top: 0px;←上端のｙ座標
left 0px;←左端のｘ座標
position: absolute;←絶対座標
}
＜/style＞
＜/head＞
＜body＞
＜div id="mainDiv"＞
//画像の読み込み
＜img id="myImage" src="images/dog1.png"＞
＜/div＞
＜script＞
var img = document.getElementById("myImage");
var imgHeight = parseInt(img.height);←高さの取得
var imgWidth = parseInt(img.width);←幅の取得
// イメージを移動するリスナ関数
function moveImg(event){
//クリックした時のX、Y座標を取得
img.style.left = (event.clientX - (imgWidth / 2)) + "px";
img.style.top = (event.clientY - (imgHeight / 2)) + "px";
}
// 背景部分をクリックしたときのイベントリスナー
document.addEventListener("click", moveImg, false);
＜/script＞
＜/body＞
＜/html＞
参照画像
実行結果
◆DOMツリーにエレメントを追加/削除するには
・子ノードの追加
DOMツリーにエレメントノードを動的に追加するには、初めにcreateElement()メソッドでエレメントノードを生成し、続いてappendChild()メソッドで親となるエレメントノードに子ノードとして追加する。
例えば、
imgエレメントノードを生成し、mainDivエレメントの子ノードにするには下記の通り
var newImg = document.createElement("img");
newImg.src = "images/sheep1.png";
mainDiv.appendChild(newImg);
・エレメントノードを削除するには
removeChild()メソッドを使用する。
◆クリックするとイメージを追加するプログラムを作成
生成したエレメントをDOMツリーに追加する例として、Webブラウザの背景部分をクリックすると、その位置にイメージ（imgエレメント）を追加するサンプルプログラムを作成してみる
スタイルシートの設定
＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta＞
＜title＞JavaScriptのテスト＜/title＞
＜style＞
//クラスセレクタ→追加するイメージ用のクラス「.myImage 」
.myImage {
width: 120px;イメージ幅
height: 90px;イメージ高さ
position: absolute;絶対座標
}
＜/style＞
＜/head＞
＜body＞
//空のdivエレメント「mainDiv」
＜div id="mainDiv"＞
＜/div＞
＜script＞
// イメージの高さと幅
var imgHeight = 90;
var imgWidth = 120;
// イメージを追加するdivエレメント
var mainDiv = document.getElementById("mainDiv");
// イメージを追加するappendImg（）関数
//クリックした位置にイメージを追加する
function appendImg(event) {
var newImg = document.createElement("img");
// イメージをクリックしたときに削除するイベントリスナーを設定
newImg.addEventListener("click", removeImg, true);
// クラスをmyImageに設定
newImg.setAttribute("class", "myImage");
// srcプロパティにイメージファイルのパスを代入
newImg.src = "images/sheep1.png";
// イメージの座標を設定
newImg.style.left = (event.clientX - (imgWidth / 2)) + "px";
newImg.style.top = (event.clientY - (imgHeight / 2)) + "px";
// mainDivにイメージを追加
mainDiv.appendChild(newImg);
}
// 背景部分をクリックしたときのイベントリスナー
document.addEventListener("click", appendImg, false);
// イメージを削除する関数
function removeImg(event) {
mainDiv.removeChild(event.target);
// イベントの伝搬を停止
event.stopPropagation();
}
＜/script＞
＜/body＞
＜/html＞
