2012年12月2日日曜日

TypeScript でタグ属性値の操作

helloworld2.html <!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 件のコメント:

コメントを投稿