Hướng dẫn show/hide div javascript - hiển thị / ẩn div javascript

Question

How TO - Toggle Hide and Show

Toggle between hiding and showing an element with JavaScript.

Nội dung chính Show

How TO - Toggle Hide and Show
Toggle (Hide/Show) an Element
Cách hiển thị hoặc ẩn một phần tử:
Ẩn một bộ sưu tập các yếu tố:
Hiển thị một bộ sưu tập các yếu tố:
Chuyển đổi màn hình:

Click the button!

Toggle (Hide/Show) an Element

Step 1) Add HTML:

Example

Click Me

This is my DIV element.
This is my DIV element.

Step 2) Add JavaScript:

Example

Click Me
  var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
}
}

This is my DIV element.

Step 2) Add JavaScript: For more information about Display and Visibility, read our CSS Display Tutorial.

Đề bài: Hãy viết ứng dụng ẩn và hiện thẻ div bằng Javascript bằng cách tạo ra 2 button, khi click vào button1 thì ẩn thẻ div và khi click vào button2 thì hiển thị thẻ div.: Hãy viết ứng dụng ẩn và hiện thẻ div bằng Javascript bằng cách tạo ra 2 button, khi click vào button1 thì ẩn thẻ div và khi click vào button2 thì hiển thị thẻ div.

Hướng dẫn show/hide div javascript - hiển thị / ẩn div javascript

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Đây là bài tập khá đơn giản, qua đó bạn có thể áp dụng ẩn và hiện nội dung bàng javascript.

Chúng ta sử dụng thuộc tính CSS

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

1 để hiển thị thẻ

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

2, và thuộc tính

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

3 để ẩn thẻ div. Nhưng vấn đề là ta phải sử dụng Javascript để làm điều này, nên phải sử dụng cú pháp dưới đây để thay đổi giá trị cho thuộc tính display CSS.

document.getElementById('id_name').style.display = "block|none";

Sau đây là bài giải tham khảo.

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

Nếu bạn sử dụng jQuery thì rất đơn giản, chỉ cần áp dụng hai hàm show và hide là có thể ẩn và hiện nội dung bất kì.

Bài viết này được đăng tại [free tuts .net]

Danh sách file tải về

Tên file tải về	Pass giải nén
Download mã nguồn	freetuts.net hoặc gameportable.net

Cách hiển thị hoặc ẩn một phần tử:

Để hiển thị hoặc ẩn một phần tử, thao tác thuộc tính kiểu của phần tử. Trong hầu hết các trường hợp, có lẽ bạn chỉ muốn thay đổi thuộc tính

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 của phần tử:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Ngoài ra, nếu bạn vẫn muốn phần tử chiếm không gian (như nếu bạn ẩn một ô bảng), bạn có thể thay đổi thuộc tính

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

5 của phần tử thay thế: thay vào đó:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Ẩn một bộ sưu tập các yếu tố:

Nếu bạn muốn ẩn một bộ sưu tập các phần tử, chỉ cần lặp lại từng phần tử và thay đổi phần tử

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 thành

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

7:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

Hiển thị một bộ sưu tập các yếu tố:

Hầu hết thời gian, có lẽ bạn sẽ chỉ cần chuyển đổi giữa

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

8 và

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

9, điều đó có nghĩa là những điều sau đây có thể đủ khi hiển thị một bộ sưu tập các yếu tố.

Bạn có thể tùy chọn chỉ định

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 mong muốn là đối số thứ hai nếu bạn không muốn nó mặc định là

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

1.

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}

// Usage:
var elements = document.querySelectorAll('.target');
show(elements);

show(elements, 'inline-block'); // The second param allows you to specify a display value

Ngoài ra, một cách tiếp cận tốt hơn để hiển thị (các) phần tử sẽ chỉ đơn thuần là loại bỏ kiểu dáng nội tuyến

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 để hoàn nguyên nó trở lại trạng thái ban đầu. Sau đó kiểm tra kiểu

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 được tính toán của phần tử để xác định xem nó có bị ẩn bởi một quy tắc xếp tầng hay không. Nếu vậy, sau đó hiển thị phần tử.

function show (elements, specifiedDisplay) {
  var computedDisplay, element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    // Remove the element's inline display styling
    element.style.display = '';
    computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');

    if (computedDisplay === 'none') {
        element.style.display = specifiedDisplay || 'block';
    }
  }
}

. Bạn sẽ biết giá trị thuộc tính

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 ban đầu thực sự của phần tử và bạn sẽ không phải mã hóa một giá trị để có được kết quả mong muốn.)

Chuyển đổi màn hình:

Tương tự, nếu bạn muốn chuyển đổi

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 của một phần tử hoặc bộ sưu tập các phần tử, bạn có thể chỉ cần lặp lại từng phần tử và xác định xem nó có hiển thị hay không bằng cách kiểm tra giá trị tính toán của thuộc tính

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4.Nếu có thể nhìn thấy, hãy đặt

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 thành

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

7, nếu không thì hãy xóa kiểu dáng

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 và nếu nó vẫn còn ẩn, hãy đặt

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

4 thành giá trị được chỉ định hoặc mặc định được mã hóa cứng,

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

1.

function toggle (elements, specifiedDisplay) {
  var element, index;

  elements = elements.length ? elements : [elements];
  for (index = 0; index < elements.length; index++) {
    element = elements[index];

    if (isElementHidden(element)) {
      element.style.display = '';

      // If the element is still hidden after removing the inline display
      if (isElementHidden(element)) {
        element.style.display = specifiedDisplay || 'block';
      }
    } else {
      element.style.display = 'none';
    }
  }
  function isElementHidden (element) {
    return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
  }
}

Javascript Example

Ẩn và hiện thẻ div bằng Javascript

Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div

Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình freetuts.net

0

programming javascript Hide element JavaScript JavaScript display: none Hide div HTML Toggle div jQuery

Hướng dẫn show/hide div javascript - hiển thị / ẩn div javascript

How TO - Toggle Hide and Show

Toggle (Hide/Show) an Element

Step 1) Add HTML:

Example

Step 2) Add JavaScript:

Example

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Cách hiển thị hoặc ẩn một phần tử:

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn một bộ sưu tập các yếu tố:

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Hiển thị một bộ sưu tập các yếu tố:

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Chuyển đổi màn hình:

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Ẩn và hiện thẻ div bằng Javascript

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội