2021-07-23, 7:48 PM
Tạo nút thay đổi nền cho web bằng Javascript
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 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
Javascript 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.
Javascript 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.
Html 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;"> 
HELLO WELCOME WEBSITE
 </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ị".
Avatar
Administrators

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 copy 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 nội dung bài viết nhé...!
  • Các bài viết trên VF Share 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 VF Share.
  • 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.
  • VF Share 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ộ VF Share, chúc bạn một ngày làm việc hiệu quả!
| 280 | Javascript
Tổng số bình luận: 0
avatar
Mohon Aktifkan Javascript!Enable JavaScript