Sử dụng Css kiểu mà chúng ta có thể ẩn hoặc hiển thị Các phần tử HTML trong javascript. Css cung cấp các thuộc tính chẳng hạn như khối và không để ẩn / hiển thị các phần tử HTML.
Ẩn một phần tử
Ví dụ
Trong ví dụ sau khi nhấp vào nút "Hideme", văn bản trong thẻ đoạn văn đã bị biến mất như được hiển thị trong đầu ra.
<html>
<body>
<p id="hide">Using JavaScript to hide HTML elements.</p>
<input type="button" onclick="document.getElementById('hide').style.display='none' value="Hideme">
</body>
</html> Khi đoạn mã trên được thực thi, phần sau sẽ được hiển thị
Từ khối trên, Nếu chúng ta nhấp vào nút "Hideme", văn bản hiện diện trong khối sẽ biến mất như được hiển thị trong đầu ra, chỉ còn lại nút.
Đầu ra
Hiển thị một phần tử
Ví dụ
Trong ví dụ sau, văn bản trong thẻ đoạn văn ban đầu bị ẩn nhưng khi nhấp vào "Showme", văn bản đã xuất hiện như được hiển thị trong đầu ra.
<html>
<body>
<p id="show" style="display:none">JavaScript can show hidden HTML elements</p>
<input type="button"onclick="document.getElementById('show').style.display='block'"value="ShowMe">
</body>
</html> Khi đoạn mã trên được thực thi, phần sau sẽ được hiển thị trên màn hình
Nếu chúng ta nhấp vào nút trên, kết quả sau sẽ được thực thi
Đầu ra
