<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>
</body>
</html>
2. ดู this และการอ้าง id
<html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>
หรือ 1 ตัวอย่าง
<html>
<head>
<script type="text/javascript">
function lighton(id)
{
id.src="bulbon.gif";
}
function lightoff(id)
{
id.src="bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton(this)" onmouseup="lightoff(this)" src="bulboff.gif" width="100" height="180" />
<p>Click and hold to turn on the light!</p>
</body>
</html>
3. การเปลี่ยน style ด้วย html dom
current HTML element this.style.property=new style
<h1 onclick="this.style.color='red'">Click Me!</h1>
specific HTML element document.getElementById(id).style.property=new style
<h1 id="h1" onclick="document.getElementById('h1').style.color='red'">Click Me!</h1>
4.อีก case กรณี current html element ไม่ต้องใส่ this ก็ได้
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น