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ị".

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

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

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

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