Thay đổi Backgroud Của Thẻ HTML Bằng Javascript

Trang chủ » đổi Màu Button Trong Html » Thay đổi Backgroud Của Thẻ HTML Bằng Javascript

Có thể bạn quan tâm

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.

test php

banquyen pngBài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. 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ài viết này được đăng tại [free tuts .net]

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

Danh sách file tải về

Tên file tải về Pass giải nén
Download mã nguồn freetuts.net hoặc gameportable.net

Từ khóa » đổi Màu Button Trong Html