Thay đổi backgroud của thẻ HTML bằng Javascript

DOWNLOAD DEMO

Cho một đoạn mã HTML có sẵn như dưới đây, hãy viết một đoạn mã Javascript khi click vào button#btn1 thì đổi màu bacckground cho thẻ div#content sang màu đỏ, khi click vào button#btn2 thì đổi background sang màu xanh.

HTML RUN
<div id="content" style="padding: 20px; background: blue; color: white; margin: 40px 0px;">
    CHÀO MỪNG BẠN ĐẾN VỚI FREETUTS.NET
</div>

<input type="button" id="btn1" value="Đổi Backgroud màu đỏ"/>
<input type="button" id="btn2" value="Đổi Backgroud màu xanh"/>

Hướng dẫn

Để làm bài này thì chúng ta thực hiện các bước như sau:

Bước 1: Lấy các đối tượng HTML

Code
// Lấy 2 button và thẻ div
var button1 = document.getElementById("btn1");
var button2 = document.getElementById("btn2");
var div = document.getElementById('content');

Bước 2: Thay đổi thuộc tính CSS

Ta sử dụng thuộc tính style.background = mã màu để thay đổi background.

Code
// Thiết lập click cho button 1
button1.onclick = function () {
    div.style.background = "red";
};

// Thiết lập click cho button 2
button2.onclick = function () {
    div.style.background = "blue";
};

Toàn bộ chương trình

Sau đây là toàn bộ chương trình code của bài này.

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>Thay đổi CSS cho thẻ HTML</h2>

        <div id="content" style="padding: 20px; background: #ddd; color: white; margin: 40px 0px;">
            CHÀO MỪNG BẠN ĐẾN VỚI FREETUTS.NET
        </div>

        <input type="button" id="btn1" value="Đổi Backgroud màu đỏ"/>
        <input type="button" id="btn2" value="Đổi Backgroud màu xanh"/>

        <script language="javascript">
            // Lấy 2 button và thẻ div
            var button1 = document.getElementById("btn1");
            var button2 = document.getElementById("btn2");
            var div = document.getElementById('content');

            // Thiết lập click cho button 1
            button1.onclick = function () {
                div.style.background = "red";
            };

            // Thiết lập click cho button 2
            button2.onclick = function () {
                div.style.background = "blue";
            };
        </script>
    </body>
</html>

Từ ví dụ này ta thấy để thay đổi style CSS cho thẻ HTML thì ta sử dụng cú pháp style.ten_thuoc_tinh = "giá trị".

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

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM