Trang chủ
CSS
Hiển thị CSS
Dùng thử: Sử dụng CSS và JavaScript để hiển thị một phần tử khi nhấp chuột
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> #panel, .flip { font-size: 16px; phần đệm: 10px; căn chỉnh văn bản: giữa; màu nền: #4CAF50; màu trắng; đường viền: liền khối 1px #a6d8a8; lề: tự động; } #panel { hiển thị: không có; } </style> </head> <body> <p class="flip" onclick="myFunction()">Nhấp để hiển thị bảng</p> <div id="panel"> <p>Bảng này chứa một phần tử div, được ẩn theo mặc định (display: none).</p> <p>Nó được tạo kiểu bằng CSS và chúng tôi sử dụng JavaScript để hiển thị nó (display: block).</p> <p>Cách thức hoạt động: Lưu ý rằng phần tử p có class="flip" có thuộc tính onclick được đính kèm. Khi người dùng nhấp vào phần tử p, một hàm có tên myFunction() sẽ được thực thi, hàm này sẽ thay đổi kiểu của div với id="panel" từ display:none (ẩn) thành display:block (hiển thị).</p> <p>Bạn sẽ tìm hiểu thêm về JavaScript trong Hướng dẫn JavaScript của chúng tôi.</p> </div> <script> function myFunction() { document.getElementById("panel").style.display = "block"; } </script> </body> </html>