<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world 2</title>
<style type="text/css">
#box { width: 150px; height: 150px; border: 1px solid #4c4c4c; }
.red { background-color: #ffcccc; }
.blue { background-color: #ccccff;}
</style>
</head>
<body>
<h1>Hello World 2</h1>
<div id="box">
Hello World 2
</div>
<img id="shape" src="circle.png"></img>
<br />
<br />
<input type="button" value="get attributes" id="button1">
<script src="helloworld2.js"></script>
</body>
</html>
helloworld2.ts
function boxOver(e : MouseEvent) {
box.className = "red";
}
function boxNormal(e : MouseEvent) {
box.className = "blue";
}
function shapeOver(e : MouseEvent) {
image.src = "star.png";
}
function shapeNormal(e : MouseEvent) {
image.src = "circle.png";
}
function getAttributes(e : MouseEvent) {
var attrs : Attr[] = box.attributes;
var msg = "";
for(var i = 0; i < attrs.length; i++) {
var attr = attrs[i];
msg = msg + attr.nodeName + ":" + attr.nodeValue + "\n";
}
alert(msg);
}
var box : HTMLElement = document.getElementById("box");
box.addEventListener("mouseover", boxOver, false);
box.addEventListener("mouseout", boxNormal, false);
var image : HTMLImageElement = <HTMLImageElement>document.getElementById("shape")
image.addEventListener("mouseover", shapeOver, false);
image.addEventListener("mouseout", shapeNormal, false);
var btn1 : HTMLElement = document.getElementById("button1");
btn1.addEventListener("click", getAttributes, false);
HTMLElement の attributes は Attr[] という配列になる。
0 件のコメント:
コメントを投稿