Chuyển đổi JavaScript onclick

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

bằng một cú nhấp chuột , bạn có thể thêm trình lắng nghe sự kiện title vào phần tử

Trình nghe title cho nút sẽ có một function sẽ thay đổi thuộc tính display 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ó một 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 xử lý sự kiện title 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 display 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 display sẽ được đặt trở 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 để chuyển một nút bằng JavaScript?

Phương thức tgl[] được sử dụng để bật/tắt nút trong JavaScript . Trong phương pháp này, bạn trích xuất phần tử HTML bằng cách sử dụng thuộc tính getElementById, sau đó câu lệnh if other-if được thêm vào phần tử đó. Nếu “giá trị==ON”, hãy chuyển giá trị thành “OFF”. Nếu giá trị là TẮT, thì giá trị đó sẽ được chuyển thành “BẬT”.

Toggle[] trong JavaScript là gì?

Phương thức toggle[] chuyển đổi giữa hide[] và show[] cho các phần tử được chọn . Phương pháp này kiểm tra các yếu tố được chọn cho khả năng hiển thị. show[] được chạy nếu một phần tử bị ẩn. hide[] được chạy nếu một phần tử hiển thị - Điều này tạo ra hiệu ứng chuyển đổi.

Làm cách nào để chuyển đổi giữa hai div trong JavaScript?

Dự án trong JavaScript & JQuery . Nó kiểm tra phần tử div để xem tôi. e. phương thức show[] nếu div bị ẩn. Và hide[] id phần tử div được hiển thị. Điều này cuối cùng tạo ra một hiệu ứng chuyển đổi. use the toggle[] method. It checks the div element for visibility i.e. the show[] method if div is hidden. And hide[] id the div element is visible. This eventually creates a toggle effect.

Nhấp chuột chuyển đổi là gì?

Định nghĩa và cách sử dụng . Khi nhấp vào một phần tử, chức năng được chỉ định đầu tiên sẽ kích hoạt, khi nhấp lại, chức năng thứ hai sẽ kích hoạt, v.v. The toggle[] method attaches two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on.

Chủ Đề