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

Đăng bởi: TheHalfHeart - Vào ngày: - View: 8070

DOWNLOAD DEMO

Hãy viết ứng dụng ẩn và hiện một 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.

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

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

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

Code RUN 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Javascript Example</title>
    </head>
    <body>
        <h2>Ẩn và hiện thẻ div bằng Javascript</h2>
        <p>Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div</p>

        <div id="content" style="border: solid 1px; padding: 20px; background: #ddd;">
            Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình <a href="https://freetuts.net" title="học lập trình">freetuts.net</a>
        </div>
        <br/>
        <input type="button" id="btn1" value="Ẩn"/>
        <input type="button" id="btn2" value="Hiển Thị"/>

        <script language="javascript">

            document.getElementById("btn1").onclick = function () {
                document.getElementById("content").style.display = 'none';
            };

            document.getElementById("btn2").onclick = function () {
                document.getElementById("content").style.display = 'block';
            };

        </script>
    </body>
</html>

-------------------#####-------------------

Khóa học nên xem

Nguồn: freetuts.net