Thay đổi màu nền trang web bằng JavaScript

Trong phát triển web, việc tương tác và thay đổi giao diện của trang web là một phần quan trọng trong việc tạo ra trải nghiệm người dùng phong phú và hấp dẫn. JavaScript, với khả năng tương tác trực tiếp với các phần tử HTML và CSS, đã trở thành công cụ không thể thiếu trong việc tạo ra những tính năng động cho trang web. Một trong những tính năng cơ bản nhưng hữu ích trong JavaScript là khả năng thay đổi màu nền của trang web, giúp thay đổi không gian trực quan của người dùng.

Trong bài tập này, mình sẽ học cách sử dụng JavaScript để thay đổi màu nền trang web, từ những thao tác đơn giản như thay đổi màu nền theo một yêu cầu cố định cho đến các ứng dụng thực tế như thay đổi màu nền theo thời gian trong ngày hoặc sự kiện người dùng. Việc thay đổi màu nền không chỉ giúp trang web trở nên sinh động hơn, mà còn có thể ứng dụng trong việc tạo ra các trang web phản hồi (responsive), tăng cường tính tương tác và giúp người dùng có những trải nghiệm trực quan thú vị.

Khái niệm về màu nền trang web (background-color) bằng JavaScript

Màu nền của một trang web được thiết lập bằng thuộc tính CSS background-color. Thuộc tính này cho phép chúng ta chỉ định màu sắc của phần nền của trang hoặc các phần tử trong trang web như div, header, footer, hay section. Màu nền có thể được xác định bằng các giá trị như tên màu (ví dụ: red, blue, green), mã màu hexa (ví dụ: #ff5733), giá trị RGB (ví dụ: rgb(255, 0, 0)), hoặc các giá trị màu khác như RGBA (RGB với độ trong suốt) hay HSL.

Ví dụ:

body {
    background-color: #f0f0f0;  /* Màu nền xám sáng cho toàn bộ trang */
}

Với đoạn mã trên, màu nền của trang web sẽ được thiết lập thành màu xám sáng với mã màu #f0f0f0.

Cách thay đổi màu nền trang web bằng CSS thông thường

Trong CSS, để thay đổi màu nền của trang web hoặc các phần tử cụ thể, chúng ta sử dụng thuộc tính background-color. Có thể áp dụng màu nền cho toàn bộ trang web hoặc cho các phần tử riêng biệt, ví dụ:

Màu nền cho toàn bộ trang web (body):

body {
    background-color: lightblue;
}

Màu nền cho các phần tử cụ thể (div):

div {
    background-color: #ffcc00;
}

Đoạn mã trên sẽ thay đổi màu nền của trang web thành màu xanh sáng và phần tử div thành màu vàng sáng.

Tương tác với CSS qua JavaScript

JavaScript có thể tương tác trực tiếp với CSS của trang web thông qua DOM (Document Object Model). Bằng cách sử dụng JavaScript, bạn có thể thay đổi thuộc tính CSS của phần tử HTML, bao gồm việc thay đổi màu nền của trang hoặc các phần tử cụ thể trên trang web mà không cần phải thay đổi mã CSS thủ công.

Để thay đổi màu nền của trang web bằng JavaScript, ta có thể sử dụng các phương thức DOM như document.body.style.backgroundColor. Đây là cách đơn giản và nhanh chóng để thay đổi màu nền bằng JavaScript.

Ví dụ:

document.body.style.backgroundColor = 'yellow';  // Đổi màu nền của trang thành vàng

Ngoài ra, bạn cũng có thể thay đổi màu nền của một phần tử cụ thể như div, header, hoặc bất kỳ phần tử HTML nào khác. Để làm điều này, bạn cần chọn phần tử đó và thay đổi thuộc tính CSS của nó.

Ví dụ thay đổi màu nền của một phần tử div:

document.getElementById('myDiv').style.backgroundColor = 'red';

Trong ví dụ trên, màu nền của phần tử div có id="myDiv" sẽ được thay đổi thành màu đỏ.

Cách thay đổi màu nền trang web bằng JavaScript

Sử dụng document.body.style

Cách đơn giản nhất để thay đổi màu nền của trang web là sử dụng đối tượng document.body.style trong JavaScript. Thuộc tính backgroundColor của đối tượng này cho phép bạn thay đổi màu nền của toàn bộ trang web.

Cú pháp cơ bản:

document.body.style.backgroundColor = "color";

Trong đó, "color" có thể là bất kỳ giá trị màu hợp lệ nào, ví dụ như tên màu ("red", "blue", "green"), mã màu hexa ("#ff5733"), giá trị RGB ("rgb(255, 0, 0)"), hay giá trị HSL.

Ví dụ đơn giản: Thay đổi màu nền của trang web khi tải trang

Dưới đây là một ví dụ về cách thay đổi màu nền của trang web khi trang được tải. Ta sẽ sử dụng JavaScript để thay đổi màu nền của trang web thành màu xanh da trời khi người dùng truy cập trang.

window.onload = function() {
    document.body.style.backgroundColor = "lightblue";  // Đổi màu nền của trang thành xanh nhạt
};

Khi người dùng tải trang web, màu nền của toàn bộ trang sẽ tự động chuyển sang màu xanh nhạt (lightblue).

Sử dụng hàm để thay đổi màu nền

Bạn có thể tạo một hàm JavaScript để thay đổi màu nền theo yêu cầu của người dùng. Điều này cho phép người dùng có thể chọn màu nền mình muốn thông qua các sự kiện như nhấn nút, chọn màu từ menu, hoặc bất kỳ hành động tương tác nào khác.

Cách tạo một hàm JavaScript để thay đổi màu nền:

• Trước tiên, tạo một nút hoặc phần tử HTML mà người dùng có thể nhấn vào.

• Sau đó, gắn một sự kiện click vào nút đó để thay đổi màu nền của trang khi người dùng nhấn.

Ví dụ: Một nút thay đổi màu nền khi người dùng nhấn vào

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thay đổi Màu Nền</title>
</head>
<body>
    <button onclick="changeBackgroundColor('yellow')">Thay đổi màu nền thành vàng</button>
    <button onclick="changeBackgroundColor('lightgreen')">Thay đổi màu nền thành xanh lá</button>
    <button onclick="changeBackgroundColor('pink')">Thay đổi màu nền thành hồng</button>

    <script>
        // Hàm thay đổi màu nền trang web
        function changeBackgroundColor(color) {
            document.body.style.backgroundColor = color;
        }
    </script>
</body>
</html>

Giải thích:

• Trong ví dụ này, ta có ba nút với các màu sắc khác nhau: vàng (yellow), xanh lá cây (lightgreen), và hồng (pink).

• Khi người dùng nhấn vào một nút, hàm changeBackgroundColor() được gọi và thay đổi màu nền của trang web thành màu tương ứng với giá trị màu được truyền vào hàm.

• Hàm changeBackgroundColor(color) sử dụng document.body.style.backgroundColor để thay đổi màu nền của toàn bộ trang.

Kết quả:

Khi người dùng nhấn vào một trong các nút trên trang, màu nền của trang web sẽ thay đổi tương ứng với màu mà họ đã chọn.

Các tình huống sử dụng màu nền trang web bằng JavaScript

Thay đổi màu nền theo thời gian (ví dụ: sáng tối)

Một tình huống sử dụng rất phổ biến là thay đổi màu nền của trang web theo thời gian trong ngày, ví dụ như chuyển màu nền sang màu sáng vào buổi sáng và màu tối vào buổi tối. Đây là một cách đơn giản nhưng hiệu quả để tạo ra sự thay đổi theo thời gian và cải thiện trải nghiệm người dùng, đặc biệt là trong các ứng dụng hoặc trang web có chủ đề liên quan đến thời gian hoặc thay đổi theo ngày.

Cách sử dụng JavaScript để xác định giờ và thay đổi màu nền trang web tương ứng:

Để thay đổi màu nền của trang web dựa trên thời gian trong ngày, bạn cần sử dụng đối tượng Date trong JavaScript để lấy giờ hiện tại và sau đó thay đổi màu nền dựa trên giờ đó.

Ví dụ: Thay đổi màu nền tùy theo thời gian trong ngày (sáng - tối):

window.onload = function() {
    let currentHour = new Date().getHours();  // Lấy giờ hiện tại

    if (currentHour >= 6 && currentHour < 18) {
        document.body.style.backgroundColor = "lightyellow";  // Màu nền sáng vào ban ngày
    } else {
        document.body.style.backgroundColor = "darkblue";  // Màu nền tối vào ban đêm
    }
};

Giải thích:

• Hàm new Date().getHours() trả về giờ hiện tại trong phạm vi từ 0 đến 23.

• Nếu giờ trong khoảng từ 6 giờ sáng đến 6 giờ tối, màu nền của trang web sẽ được thay đổi thành màu sáng (lightyellow).

• Nếu giờ ngoài khoảng đó (từ 6 giờ tối đến 6 giờ sáng), màu nền sẽ chuyển sang màu tối (darkblue).

Với cách này, trang web của bạn sẽ tự động thay đổi màu nền tùy theo thời gian trong ngày, mang lại trải nghiệm người dùng thú vị hơn.

Thay đổi màu nền theo sự kiện người dùng

Một tình huống sử dụng phổ biến khác là thay đổi màu nền khi người dùng tương tác với trang web. Điều này giúp tạo cảm giác động và tương tác cao cho người dùng. Các sự kiện như click, mouseover, hoặc mouseout có thể được sử dụng để thay đổi màu nền ngay khi người dùng thực hiện các thao tác trên trang.

Ví dụ thay đổi màu nền khi người dùng nhấn vào một nút hoặc di chuột qua một phần tử:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thay Đổi Màu Nền theo Sự Kiện</title>
</head>
<body>
    <h1>Di chuột qua đây để thay đổi màu nền</h1>
    <button onclick="changeBackgroundColor('lightgreen')">Nhấn để đổi màu nền</button>

    <script>
        // Thay đổi màu nền khi người dùng di chuột qua phần tử
        document.querySelector("h1").addEventListener("mouseover", function() {
            document.body.style.backgroundColor = "lightblue";  // Màu nền khi di chuột qua
        });

        // Khôi phục lại màu nền khi người dùng di chuột ra ngoài
        document.querySelector("h1").addEventListener("mouseout", function() {
            document.body.style.backgroundColor = "white";  // Màu nền mặc định
        });

        // Hàm thay đổi màu nền khi nhấn nút
        function changeBackgroundColor(color) {
            document.body.style.backgroundColor = color;
        }
    </script>
</body>
</html>

Giải thích:

• Sự kiện mouseover: Khi người dùng di chuột qua phần tử <h1>, màu nền của trang web sẽ thay đổi thành lightblue.

• Sự kiện mouseout: Khi người dùng di chuột ra khỏi phần tử <h1>, màu nền sẽ trở lại màu mặc định là white.

• Sự kiện onclick: Khi người dùng nhấn vào nút, màu nền của trang web sẽ thay đổi thành màu lightgreen thông qua hàm changeBackgroundColor(color).

Cách tiếp cận này giúp người dùng cảm thấy có sự tương tác với trang web, tạo ra các hiệu ứng động thú vị và cải thiện trải nghiệm người dùng.

Cách nâng cao màu nền trang web bằng JavaScript

Thay đổi màu nền ngẫu nhiên

Một cách thú vị để nâng cao tính năng thay đổi màu nền là sử dụng màu nền ngẫu nhiên mỗi khi trang được tải lại hoặc khi người dùng nhấn nút. Điều này có thể tạo ra một cảm giác mới mẻ và thú vị cho người dùng khi họ truy cập vào trang web của bạn.

Cách thực hiện:

• Bạn có thể tạo một mảng các màu sắc có sẵn hoặc sử dụng một hàm để tạo ra các mã màu ngẫu nhiên.

• Mỗi khi người dùng nhấn vào nút hoặc trang được tải lại, bạn sẽ chọn một màu ngẫu nhiên và thay đổi màu nền của trang web.

Ví dụ:

// Hàm để tạo mã màu ngẫu nhiên
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

// Hàm thay đổi màu nền ngẫu nhiên
function changeBackgroundRandomColor() {
    document.body.style.backgroundColor = getRandomColor();
}

// Gắn sự kiện khi người dùng nhấn nút để thay đổi màu nền
document.querySelector("#changeColorButton").addEventListener("click", changeBackgroundRandomColor);

HTML:

<button id="changeColorButton">Thay đổi màu nền</button>

Giải thích:

• Hàm getRandomColor() tạo ra một mã màu ngẫu nhiên bằng cách chọn ngẫu nhiên các ký tự từ 0 đến F.

• Hàm changeBackgroundRandomColor() thay đổi màu nền của trang web bằng cách gán màu ngẫu nhiên vừa tạo ra cho thuộc tính backgroundColor của phần tử body.

• Sự kiện click được gắn vào nút "Thay đổi màu nền" để thay đổi màu nền mỗi khi người dùng nhấn nút.

Thay đổi màu nền với CSS transition

Để làm cho việc thay đổi màu nền trở nên mượt mà và dễ chịu hơn đối với người dùng, bạn có thể kết hợp CSS transitions. Điều này giúp tạo ra hiệu ứng chuyển động mượt mà mỗi khi màu nền thay đổi, thay vì thay đổi đột ngột.

Cách thực hiện:

• Sử dụng thuộc tính transition trong CSS để chỉ định hiệu ứng chuyển đổi cho thuộc tính background-color.

• Khi JavaScript thay đổi màu nền, CSS sẽ tự động áp dụng hiệu ứng chuyển đổi mượt mà.

Ví dụ:

/* CSS cho hiệu ứng chuyển đổi */
body {
    transition: background-color 1s ease;  /* Thêm hiệu ứng chuyển màu nền trong 1 giây */
}

// Hàm thay đổi màu nền ngẫu nhiên
function changeBackgroundWithTransition() {
    document.body.style.backgroundColor = getRandomColor();
}

// Gắn sự kiện khi người dùng nhấn nút để thay đổi màu nền
document.querySelector("#changeColorButton").addEventListener("click", changeBackgroundWithTransition);

Giải thích:

• Trong CSS, thuộc tính transition được áp dụng cho phần tử body để tạo hiệu ứng mượt mà khi thay đổi màu nền.

• Thuộc tính background-color 1s ease có nghĩa là màu nền sẽ thay đổi trong vòng 1 giây với hiệu ứng chuyển động mượt mà (ease).

• Khi người dùng nhấn nút, JavaScript sẽ thay đổi màu nền, và CSS sẽ áp dụng hiệu ứng chuyển động.

Ví dụ thực hành màu nền trang web bằng JavaScript

Ví dụ 1: Thay đổi màu nền khi người dùng nhấn nút "Thay đổi màu nền"

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thay Đổi Màu Nền</title>
    <style>
        body {
            transition: background-color 1s ease;
        }
    </style>
</head>
<body>

    <button id="changeColorButton">Thay đổi màu nền</button>

    <script>
        // Hàm tạo màu ngẫu nhiên
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Hàm thay đổi màu nền
        function changeBackgroundColor() {
            document.body.style.backgroundColor = getRandomColor();
        }

        // Gắn sự kiện nhấn nút
        document.querySelector("#changeColorButton").addEventListener("click", changeBackgroundColor);
    </script>

</body>
</html>

Giải thích:

• Khi người dùng nhấn vào nút "Thay đổi màu nền", JavaScript sẽ gọi hàm changeBackgroundColor(), thay đổi màu nền trang web một cách ngẫu nhiên.

• Màu nền thay đổi sẽ có hiệu ứng mượt mà nhờ CSS transition.

Ví dụ 2: Thay đổi màu nền theo giờ trong ngày (sáng - tối)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thay Đổi Màu Nền Theo Giờ</title>
    <style>
        body {
            transition: background-color 1s ease;
        }
    </style>
</head>
<body>
    <h1>Trang Web Thay Đổi Màu Nền Theo Giờ</h1>

    <script>
        window.onload = function() {
            let currentHour = new Date().getHours();  // Lấy giờ hiện tại

            if (currentHour >= 6 && currentHour < 18) {
                document.body.style.backgroundColor = "lightyellow";  // Màu nền sáng vào ban ngày
            } else {
                document.body.style.backgroundColor = "darkblue";  // Màu nền tối vào ban đêm
            }
        };
    </script>

</body>
</html>

Giải thích:

• Khi trang được tải, JavaScript sẽ xác định giờ hiện tại và thay đổi màu nền dựa trên thời gian trong ngày.

• Nếu giờ từ 6 giờ sáng đến 6 giờ tối, màu nền sẽ sáng (lightyellow), và nếu không, màu nền sẽ tối (darkblue).

• Sự thay đổi màu nền sẽ có hiệu ứng chuyển đổi mượt mà nhờ CSS transition.

Kết bài

Việc thay đổi màu nền trang web bằng JavaScript không chỉ giúp tạo ra các trải nghiệm người dùng thú vị và sinh động mà còn mở ra nhiều cơ hội sáng tạo trong thiết kế giao diện. Từ những thay đổi cơ bản như đổi màu nền đơn giản đến các tính năng nâng cao như thay đổi màu ngẫu nhiên hay sử dụng CSS transitions để tạo hiệu ứng mượt mà, JavaScript mang đến khả năng tùy biến rất cao cho giao diện web.

Bằng cách áp dụng những kỹ thuật này, bạn có thể làm cho trang web của mình trở nên hấp dẫn hơn, đồng thời tăng cường sự tương tác và tạo ra những trải nghiệm độc đáo cho người dùng. Việc thay đổi màu nền theo các sự kiện hoặc theo thời gian trong ngày còn giúp trang web của bạn phù hợp hơn với thói quen và tâm trạng của người sử dụng.

Hy vọng qua bài viết này, bạn đã có cái nhìn rõ hơn về cách sử dụng JavaScript để thay đổi màu nền trang web, từ đó có thể áp dụng vào những dự án thực tế và cải thiện giao diện người dùng một cách hiệu quả và sáng tạo.