Làm cách nào để nhấp vào div trong JavaScript?

Để hiển thị hoặc ẩn một

bằng một lần nhấp vào , bạn có thể thêm trình xử lý sự kiện
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
0 vào phần tử

Trình nghe

const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
0 cho nút sẽ có một
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
3 sẽ thay đổi thuộc tính
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
4 của
từ giá trị mặc định [là
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
1] thành
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
2

Ví dụ: giả sử bạn có phần tử HTML

const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
3 như sau


  This is the FIRST div
  This is the SECOND div
  This is the THIRD div
  Hide THIRD div

Phần tử ở trên được tạo để ẩn hoặc hiển thị phần tử

const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
5 khi nhấp chuột

Bạn cần thêm trình lắng nghe sự kiện

const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
0 vào phần tử như thế này

const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};

HTML sẽ được hiển thị như thể phần tử

chưa từng tồn tại bằng cách đặt thuộc tính
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
4 thành
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
2

Khi bạn nhấp lại vào phần tử , thuộc tính

const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
4 sẽ được đặt lại thành
const targetDiv = document.getElementById["third"];
const btn = document.getElementById["toggle"];
btn. title = function [] {
  if [targetDiv.style.display !== "none"] {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
1, do đó,
sẽ được hiển thị lại trong trang HTML

Vì giải pháp này đang sử dụng API JavaScript gốc của trình duyệt nên bạn không cần cài đặt bất kỳ thư viện JavaScript nào như jQuery

Làm cách nào để nhấp vào div JavaScript?

Phương thức addEventListener[] được áp dụng thông qua thẻ . Phương thức được kích hoạt bởi một liên kết với một sự kiện cụ thể. Bằng cách xem xét nó, một mã được theo sau bởi các thẻ

Bạn có thể nhấp vào một div không?

Chúng tôi chỉ cần thêm sự kiện title và thêm vị trí cho nó. Sau đó, bổ sung và tùy chọn, chúng tôi thêm một con trỏ. con trỏ để cho người dùng biết div có thể nhấp được

Làm cách nào để nhấp vào một phần tử bằng JavaScript?

findElement[By. id["gbqfd"]]; . executeScript["đối số[0]. click[];", phần tử]; Bạn cũng nên lưu ý rằng tốt hơn hết là bạn nên sử dụng phương thức click[] của giao diện WebElement, nhưng tắt chế độ gốc .

Làm cách nào để thực hiện sự kiện nhấp chuột trong JavaScript?

Để kích hoạt các sự kiện nhấp chuột trong JavaScript, có thể áp dụng phương thức “click[]” để tìm nạp nút và gọi hàm đã thêm tương ứng . Ngoài ra, các phương thức “addEventListener[]” và “dispatchEvent[]” có thể được sử dụng để bao gồm một sự kiện đã chỉ định và gửi nó đến một đối tượng mới được tạo.

Chủ Đề