Mục lục #
- Thay đổi màu nền của trang khi nhấp vào nhấp chuột
- Thay đổi màu nền của các yếu tố khi nhấp vào nhấp chuột
- Thay đổi màu nền của phần tử khác khi nhấp vào nhấp chuột
Thay đổi màu nền của các trang khi nhấp vào #
Để thay đổi màu nền của trang trên nhấp chuột:
- Thêm trình nghe sự kiện
click
vào một phần tử. - Mỗi lần nhấp vào phần tử, đặt thuộc tính
document.body.style.backgroundColor
thành một màu cụ thể.
Đây là HTML cho ví dụ trong bài viết này.
Copied!
DOCTYPE html> Some text here Button
Và đây là mã JavaScript liên quan.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
Chúng tôi đã thêm một trình nghe sự kiện click
vào nút, vì vậy một chức năng được gọi mỗi khi nút được nhấp.
Mỗi lần nhấp vào nút, chúng tôi đặt thuộc tính document.body.style.backgroundColor
thành
0 và thay đổi màu nền của trang.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
Thay đổi màu nền của phần tử trên nhấp chuột #
Để thay đổi màu nền của một phần tử trên nhấp chuột:
- Thêm trình nghe sự kiện
click
vào phần tử. - Gán đối tượng
2 cho một biến trong hàm.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
- Đặt thuộc tính
3 thành màu nền cụ thể.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; }];
Mỗi lần nhấp vào nút từ ví dụ, màu nền của riêng nó được đặt.
Chúng tôi đã sử dụng thuộc tính đích trên đối tượng
2. Thuộc tínhCopied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
5 là một tham chiếu đến đối tượng [phần tử] mà sự kiện được gửi đi.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
Nói cách khác, Copied!
6 cho phép chúng tôi truy cập vào phần tử DOM mà người dùng đã nhấp.const btn = document.getElementById['btn'];
btn.addEventListener['click', function onClick[event] {
// 👇️ change background color
document.body.style.backgroundColor = 'salmon';
// 👇️ optionally change text color
// document.body.style.color = 'white';
}];
Bạn có thể
7 thuộc tínhCopied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
5 để xem phần tử DOM được người dùng nhấp vào.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { console.log[event.target]; // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; }];
Nếu bạn nhấp vào nút và xem đầu ra
9 của bạn, bạn sẽ thấy phần tửCopied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color document.body.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // document.body.style.color = 'white'; }];
0 được ghi lại.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; }];
Thay đổi màu nền của phần tử khác trên nhấp chuột #
Để thay đổi màu nền của phần tử khác trên nhấp chuột:
- Thêm trình nghe sự kiện
click
cho một trong các yếu tố. - Mỗi lần nhấp vào phần tử, thay đổi thuộc tính
2 của phần tử khác.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ change background color event.target.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // event.target.style.color = 'white'; }];
Đây là HTML cho ví dụ.
Copied!
DOCTYPE html> Some text here Button
Và đây là mã JavaScript liên quan.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { const box = document.getElementById['box']; box.style.backgroundColor = 'coral'; // 👇️ optionally change text color // box.style.color = 'white'; }];
Chúng tôi đã thêm một trình nghe sự kiện click
vào nút, vì vậy một chức năng được gọi mỗi khi nút được nhấp.