<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
cursor: pointer;
}
</style>
</head>
<body>
<p id="myID">テスト</p>
<script>
function myidEvent() {
alert( '押されました' );
}
document.getElementById( 'myID' ).onclick = myidEvent;
</script>
</body>
</html>
外部ファイルとして「.js」ファイルを読み込む場合
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
cursor: pointer;
}
</style>
<script src="dom_click.js"></script>
</head>
<body>
<p id="myID">テスト</p>
</body>
</html>
↓外部jsファイル
window.onload = function(){
document.getElementById( 'myID' ).onclick = myidEvent;
}
function myidEvent() {
alert( '押されました' );
}
変数で短く記述
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
</head>
<body>
<h1 id="myid">DOMによる要素の指定</h1>
<script>
myElement=document.getElementById('myid');
myElement.style.color='#ff0000';
myElement.style.backgroundColor='#ccc';
myElement.style.width='500px';
myElement.style.height = '100px';
</script>
</body>
</html>
簡易化する。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
</head>
<body>
<h1 id="myid">DOMによる要素の指定</h1>
<script>
myStyle = document.getElementById( 'myid' ).style;
myStyle.color='#ff0000';
myStyle.backgroundColor='#ccc';
myStyle.width = '500px';
myStyle.height = '100px';
</script>
</body>
</html>