Cách để chuyển đổi ẩn và hiển thị
Chuyển đổi giữa ẩn và hiển thị một phần tử với JavaScript.
Ấn nút!
Chuyển đổi (ẩn/hiển thị) một phần tử
Bước 1) Thêm HTML:Thí dụ
Nhấp vào đây
& nbsp; Đây là yếu tố div của tôi.
This is my DIV element.
Chuyển đổi giữa ẩn và hiển thị một phần tử với JavaScript.
Ấn nút!
Nhấp vào đây
& nbsp; Đây là yếu tố div của tôi.
This is my DIV element.
Nhấp vào đây
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
& nbsp; Đây là yếu tố div của tôi.
Bước 2) Thêm JavaScript: For more information about Display and Visibility, read our CSS Display Tutorial.
ĐA 0 phút đọc
//codepen.io/SitePoint/pen/bedZrR
//codepen.io/SitePoint/pen/pbJYpV
//codepen.io/SitePoint/pen/zBGbjb
//codepen.io/SitePoint/pen/QEboZm
//codepen.io/SitePoint/pen/YWXgdW
//jsbin.com/cuhuxizahe/edit?html,css,output
Nguồn: //www.sitepoint.com/five-ways-to-hide-ements-in-css/
Đã đăng ký Bản quyền
Trong hướng dẫn này, chúng tôi sẽ học cách ẩn phần tử HTML với JavaScript.
Việc ẩn một phần tử HTML có thể được thực hiện theo những cách khác nhau trong JavaScript. Trong hướng dẫn này, chúng ta sẽ thấy ba cách thực hiện phổ biến nhất -
Nói chung, chúng tôi sử dụng thuộc tính ẩn để ẩn một yếu tố cụ thể. Chúng ta có thể chuyển đổi giữa ẩn và hiển thị phần tử bằng cách đặt giá trị thuộc tính ẩn thành đúng hoặc sai, tương ứng.
Theo hai cách khác, chúng tôi sử dụng đối tượng kiểu của phần tử. Chúng tôi có hai thuộc tính trong đối tượng kiểu để ẩn phần tử HTML, một thuộc tính là màn hình và một thuộc tính khác là khả năng hiển thị.
Trong JavaScript, chúng ta có thể sử dụng cả hai thuộc tính này để ẩn các phần tử HTML, nhưng sự khác biệt chính giữa hai thuộc tính này là khi chúng ta sử dụng thuộc tính Sylept. Trong khi trong thuộc tính style.display, không chỉ thẻ ẩn mà còn không có không gian được phân bổ cho phần tử đó.
Sử dụng thuộc tính Style.Display
Nói chung, chúng tôi sử dụng thuộc tính ẩn để ẩn một yếu tố cụ thể. Chúng ta có thể chuyển đổi giữa ẩn và hiển thị phần tử bằng cách đặt giá trị thuộc tính ẩn thành đúng hoặc sai, tương ứng.
document.getElementById('element').hidden = trueTheo hai cách khác, chúng tôi sử dụng đối tượng kiểu của phần tử. Chúng tôi có hai thuộc tính trong đối tượng kiểu để ẩn phần tử HTML, một thuộc tính là màn hình và một thuộc tính khác là khả năng hiển thị.
Trong JavaScript, thuộc tính ẩn của một phần tử được sử dụng để ẩn một phần tử. Chúng tôi đặt giá trị thuộc tính ẩn thành true để ẩn phần tử.
<html> <body> <div id="dip"> Click the below buttons to hide or show this text. </div><br> <button title="hide()"> Hide Element </button> <button title="show()"> Show Element </button> <script> function hide() { document.getElementById('dip').hidden = true } function show() { document.getElementById('dip').hidden = false } </script> </body> </html>
Sử dụng thuộc tính Syleption.style.display property is also used to hide the HTML element. It can have values like ‘block,’ ‘inline,’ ‘inline-block,’ etc., but the value used to hide an element is ‘none.’ Using JavaScript, we set the style.display property value to ‘none’ to hide html element.
Nói chung, chúng tôi sử dụng thuộc tính ẩn để ẩn một yếu tố cụ thể. Chúng ta có thể chuyển đổi giữa ẩn và hiển thị phần tử bằng cách đặt giá trị thuộc tính ẩn thành đúng hoặc sai, tương ứng.
document.getElementById('element').style.display = 'none'Theo hai cách khác, chúng tôi sử dụng đối tượng kiểu của phần tử. Chúng tôi có hai thuộc tính trong đối tượng kiểu để ẩn phần tử HTML, một thuộc tính là màn hình và một thuộc tính khác là khả năng hiển thị.
Trong JavaScript, thuộc tính ẩn của một phần tử được sử dụng để ẩn một phần tử. Chúng tôi đặt giá trị thuộc tính ẩn thành true để ẩn phần tử.
<html> <style> #myDIV { width: 630px; height: 300px; background-color: #F3F3F3; } </style> <body> <p> Click the "Hide Element" button to hide the div element. </p> <button title="hide()"> Hide Element </button> <div id="myDIV"> Hello World! This is DIV element </div> <script> function hide() { document.getElementById('myDIV').style.display = 'none' } </script> </body> </html>
Nói chung, chúng tôi sử dụng thuộc tính ẩn để ẩn một yếu tố cụ thể. Chúng ta có thể chuyển đổi giữa ẩn và hiển thị phần tử bằng cách đặt giá trị thuộc tính ẩn thành đúng hoặc sai, tương ứng.style.visibility property is also used to hide the HTML element. It can have values like ‘visible,’ ‘collapse,’ ‘hidden’, ‘initial’ etc., but the value used to hide an element is ‘hidden’. Using JavaScript, we set the style.visibility property value to ‘hidden’ to hide html element.
Nói chung, chúng tôi sử dụng thuộc tính ẩn để ẩn một yếu tố cụ thể. Chúng ta có thể chuyển đổi giữa ẩn và hiển thị phần tử bằng cách đặt giá trị thuộc tính ẩn thành đúng hoặc sai, tương ứng.
.hide { visibility: hidden; } 0Theo hai cách khác, chúng tôi sử dụng đối tượng kiểu của phần tử. Chúng tôi có hai thuộc tính trong đối tượng kiểu để ẩn phần tử HTML, một thuộc tính là màn hình và một thuộc tính khác là khả năng hiển thị.
Trong JavaScript, thuộc tính ẩn của một phần tử được sử dụng để ẩn một phần tử. Chúng tôi đặt giá trị thuộc tính ẩn thành true để ẩn phần tử.
.hide { visibility: hidden; } 1Cú pháp
Trong hướng dẫn này, chúng tôi đã học ba cách để ẩn một yếu tố bằng JavaScript. Cách tiếp cận đầu tiên là sử dụng thuộc tính ẩn của một yếu tố. Tiếp theo là đặt thuộc tính Style.display thành ‘ẩn. Phương pháp thứ ba là đặt thuộc tính Style. Tính khả thi thành ‘ẩn.
Cập nhật vào ngày 15 tháng 9 năm 2022 11:51:07