Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính sự kiện onmousedown HTML

Thuộc tính sự kiện onmousedown HTML được kích hoạt khi nhấn nút chuột xuống phần tử HTML trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

<tagname onmousedown=”script”></tagname>

Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện onmousedown HTML−

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
   }
   .circle {
      background: #db133a;
      height: 150px;
      width: 150px;
      border-radius: 50%;
      margin: 10px auto;
   }
   p {
      margin: 30px auto;
   }
</style>
</head>
<body>
<h1>HTML onmousedown Event Attribute Demo</h1>
<div class="circle" onmousedown="mouseDownFn()" onmouseup="mouseUpFn()"></div>
<p>Try to click the above red circle</p>
<script>
   function mouseDownFn() {
      document.querySelector('.circle').style.transform = 'scale(0.5)';
   }
   function mouseUpFn() {
      document.querySelector('.circle').style.transform = 'scale(1.2)';
   }
</script>
</body>
</html>

Đầu ra

Thuộc tính sự kiện onmousedown HTML

Nhấp vào vòng tròn “màu đỏ” để quan sát cách hoạt động của thuộc tính sự kiện onmousedown.

Thuộc tính sự kiện onmousedown HTML

Thuộc tính sự kiện onmousedown HTML