スタイルシートを操作しよう
DOMを使うと、Javascriptのプログラムからスタイルシートのプロパティを動的に変更する事が可能になる。
【開発環境】
OS;Window10
Webブラウザ:Google Chrome
テキストエディタ:Brackets
◆スタイルシートのプロパティを設定する
スタイルシートのプロパティは、エレメントオブジェクトのstyleプロパティからアクセスできる。
書式
エレメント.style.スタイルシートのプロパティ
例
title.style.textAling = "right";
・テキストの配置を設定してみる
![](https://blogimg.goo.ne.jp/user_image/44/80/f9d722f3dba591c613b59e85dd2112f0.jpg)
サンプルプログラム「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で検索する方が簡単で信頼性が高くなります
・スタイルシートのプロパティ
![](https://blogimg.goo.ne.jp/user_image/17/0a/a6767507840a4d5532ef54e149e0d3ce.jpg)
◆イメージをクリックした位置に移動するには
![](https://blogimg.goo.ne.jp/user_image/72/b9/2074442e3750f6ddbeea4e3b95b711e2.jpg)
・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;←上端のy座標
left 0px;←左端のx座標
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>
参照画像
![](https://blogimg.goo.ne.jp/user_image/38/fb/4ba8f0b129ee6456b8d9df6aef1287cd.jpg)
実行結果
![](https://blogimg.goo.ne.jp/user_image/76/1f/bb1ca3bb51035369288635e419d6f400.jpg)
◆DOMツリーにエレメントを追加/削除するには
・子ノードの追加
DOMツリーにエレメントノードを動的に追加するには、初めにcreateElement()メソッドでエレメントノードを生成し、続いてappendChild()メソッドで親となるエレメントノードに子ノードとして追加する。
例えば、
imgエレメントノードを生成し、mainDivエレメントの子ノードにするには下記の通り
var newImg = document.createElement("img");
newImg.src = "images/sheep1.png";
mainDiv.appendChild(newImg);
・エレメントノードを削除するには
removeChild()メソッドを使用する。
◆クリックするとイメージを追加するプログラムを作成
生成したエレメントをDOMツリーに追加する例として、Webブラウザの背景部分をクリックすると、その位置にイメージ(imgエレメント)を追加するサンプルプログラムを作成してみる
![](https://blogimg.goo.ne.jp/user_image/76/f5/3026561a4bd44eb7b93c8b456bb7aba6.jpg)
スタイルシートの設定
<!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>
※コメント投稿者のブログIDはブログ作成者のみに通知されます