Hướng dẫn hide element javascript - ẩn phần tử javascript

Question

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ội dung chính Show

Cách để chuyển đổi ẩn và hiển thị
Chuyển đổi (ẩn/hiển thị) một phần tử
Hiển thị
Trưng bày
Chức vụ
Chiều cao & kích thước phông chữ
Sử dụng thuộc tính ẩn
Sử dụng thuộc tính Syleption.
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
Sử dụng thuộc tính Syleption.
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 Syleption.
Sử dụng thuộc tính Syleption.
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ử đó.

Ấ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.

Bước 2) Thêm JavaScript:

Thí dụ

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

Độ mờ

.hide {
  opacity: 0;
}

http://codepen.io/SitePoint/pen/bedZrR

Hiển thị

.hide {
   visibility: hidden;
}

http://codepen.io/SitePoint/pen/pbJYpV

Trưng bày

.hide {
   display: none;
}

http://codepen.io/SitePoint/pen/zBGbjb

Chức vụ

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

http://codepen.io/SitePoint/pen/QEboZm

Clip-path

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

http://codepen.io/SitePoint/pen/YWXgdW

Chiều cao & kích thước phông chữ

.hide{
  height:0;
  font-size:0;
  border: 0;
}

http://jsbin.com/cuhuxizahe/edit?html,css,output

Nguồn: https://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 -

Sử dụng thuộc tính ẩnhidden property
Sử dụng thuộc tính Style.Displaystyle.display property
Sử dụng thuộc tính Syleption.style.visibility property

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 ẩn

Sử dụng thuộc tính Style.Display

Sử dụng thuộc tính Syleption.

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 = true

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ử đó.

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 onclick="hide()"> Hide Element </button>
   <button onclick="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 Style.Display

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.

Sử dụng thuộc tính Syleption.

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, 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ử đó.

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 onclick="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>

Sử dụng thuộc tính Syleption.

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.

Sử dụng thuộc tính Syleption.

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;
}

0

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ử đó.

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;
}

1

Cú 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

Câu hỏi và câu trả lời liên quan
Làm thế nào để hiển thị phần tử HTML với JavaScript?
Làm thế nào để ẩn/hiển thị các phần tử HTML trong JavaScript?
Làm thế nào tôi có thể hiển thị và ẩn một phần tử HTML bằng jQuery?
Ẩn một phần tử khỏi chế độ xem với CSS
Thêm thuộc tính onInput vào phần tử HTML với JavaScript?
Làm thế nào để tạo một phần tử HTML có thể kéo với JavaScript và CSS?
Làm thế nào để ẩn ScrollBars với CSS?
Thay thế HTML Div thành phần tử văn bản bằng JavaScript?
Làm thế nào để thêm nhiều trình xử lý sự kiện vào cùng một yếu tố với JavaScript HTML DOM?
Ẩn Div chứa văn bản cụ thể với JavaScript?
Làm thế nào để ẩn một menu điều hướng trên cuộn xuống với CSS và JavaScript?
Ẩn nội dung với bootstrap
JQuery Hide () với các ví dụ
Chỉ chuyển đổi lớp ẩn trên div đã chọn với javascript?
Làm thế nào để thêm một phần tử mới vào HTML DOM trong JavaScript?