06/04/2021, 14:48
hay nhất đổi backgroud của thẻ HTML bằng Javascript - Bài tập 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 RUN <div id="content" ...
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
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ị".
