Tạo nút thay đổi nền cho web bằng Javascript

13/Apr/2019, 06.57.25

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.

Copy

 <div id="content" style="padding: 20px; background: blue; color: white; margin: 40px 0px;"> 

 Phần body trang web 

 </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

Copy

 // 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.

Copy

 // 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"; 

 };

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

Copy

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

Administrator

Cảnh báo:

Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
Nếu bạn coppy bài của người khác hoặc từ trang khác, xin vui lòng điền tên tác giả và nguồn của bài viết nhé...!
Các bài viết trên Share4s chỉ mang tính chất tham khảo, bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virus. Hãy quét virus trước khi cài đặt bất cứ thứ gì.
Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của Share4s.
Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các vấn đề vi phạm.
Share4s luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
Cảm ơn bạn đã luôn quan tâm và ủng hộ Share4s, chúc bạn một ngày làm việc hiệu quả!

Backgound, website, JavaScript | 415 | Thủ thuật website

Tổng số bình luận: 0