Thuộc tính id HTML được sử dụng để cấp phát một số nhận dạng duy nhất cho một phần tử để tách phần tử đó ra để áp dụng CSS và JavaScript trên đó. Không có hai phần tử nào có thể có cùng một id trong một trang HTML. Tôi bắt đầu bằng một ký hiệu bát phân (#).
LƯU Ý - Kể từ khi id HTML5 bắt đầu bằng một số được phép chỉ định.
Hãy xem một ví dụ cho thuộc tính id -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-clientX</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.clientX;
var y = event.clientY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
} else {
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html> Điều này sẽ tạo ra kết quả sau -
1) Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ trong vùng màu xanh lục (an toàn) -
2) Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ ở cuối vùng màu xanh lục (an toàn) -
3) Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ trong khu vực màu đỏ (nguy hiểm) -
