Mục lục #
- Thay đổi màu của một nút title
- Thay đổi màu của nút mỗi khi nhấp vào
Thay đổi màu của một nút title #
Để thay đổi màu của một nút title:
- Thêm trình nghe sự kiện
click
vào nút. - Mỗi lần nhấp vào nút, đặt thuộc tính
style.backgroundColor
của nó thành một giá trị mới. - Tùy chọn đặt thuộc tính
style.color
của nó.
Đây là HTML cho các ví dụ trong bài viết này.
Copied!
DOCTYPE html> Button
Và đây là JavaScript liên quan.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[] { btn.style.backgroundColor = 'salmon'; btn.style.color = 'white'; }];
Nếu bạn cần thay đổi màu của nút mỗi khi nhấp vào, hãy cuộn xuống tiêu đề tiếp theo.
Chúng tôi đã thêm một trình nghe sự kiện vào nút. Người nghe sự kiện gọi một chức năng mỗi khi nhấp vào nút.
Chúng tôi đã sử dụng thuộc tính style.backgroundColor
để thay đổi màu nền của nút và thuộc tính style.color
để thay đổi màu phông chữ của nút.
Thay đổi màu của nút mỗi khi nhấp vào #
Để thay đổi màu của nút mỗi khi nhấp vào:
- Thêm trình nghe sự kiện
click
vào nút. - Mỗi lần nhấp vào nút, đặt thuộc tính
style.backgroundColor
của nó thành một giá trị mới. - Tùy chọn đặt thuộc tính
style.color
của nó.
Đây là HTML cho các ví dụ trong bài viết này.
Copied!
DOCTYPE html> Button
Và đây là JavaScript liên quan.
Copied!
const btn = document.getElementById['btn']; let index = 0; const colors = ['salmon', 'green', 'blue', 'purple']; btn.addEventListener['click', function onClick[] { btn.style.backgroundColor = colors[index]; btn.style.color = 'white'; index = index >= colors.length - 1 ? 0 : index + 1; }];
Nếu bạn cần thay đổi màu của nút mỗi khi nhấp vào, hãy cuộn xuống tiêu đề tiếp theo.
Chúng tôi đã thêm một trình nghe sự kiện vào nút. Người nghe sự kiện gọi một chức năng mỗi khi nhấp vào nút.
Chúng tôi đã sử dụng thuộc tính style.backgroundColor
để thay đổi màu nền của nút và thuộc tính style.color
để thay đổi màu phông chữ của nút.
Thay đổi màu của nút mỗi khi nhấp vào #
Để thay đổi màu của nút mỗi khi nhấp vào:
Sử dụng biến
1 để theo dõi các màu hiện tại và tiếp theo.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[] { btn.style.backgroundColor = 'salmon'; btn.style.color = 'white'; }];
Đây là HTML cho ví dụ này.
Và đây là mã JavaScript liên quan.