QC-ADSeense
Click Đăng Ký hoặc đăng nhập bằng mạng xã hội để lướt web nhanh hơn, trải nghiệm đầy đủ hơn cũng như loại bỏ một số quảng cáo popup khó chịu trên web nhé!
Home » Files » Thủ thuật website » 13/Apr/2019, 06.57.25

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.

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ị".
© Coppy: https://freetuts.net

Lưu Ý:
  • 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 VF Media chỉ mang tính chất chia sẻ thông tin tham khảo, các 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.
  • 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 Media.
  • 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 bài viết vi phạm.
  • VF Media 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 đã quan tâm và ủng hộ VF Media, chúc bạn một ngày làm việc hiệu quả!

Thể loại: Thủ thuật website | Được thêm bởi: Administrator | Tags: Backgound, website, JavaScript
Số tin nhắn: 0
avatar