Làm cách nào để thay đổi màu sắc trong JavaScript?

Hướng dẫn này sẽ thảo luận về cách thay đổi màu nền bằng cách sử dụng thuộc tính backgroundColor trong JavaScript

Thay đổi màu nền bằng thuộc tính backgroundColor trong JavaScript

Chúng ta có thể thay đổi màu nền bằng cách sử dụng thuộc tính backgroundColor trong JavaScript. Để sử dụng thuộc tính này, bạn cần lấy phần tử có màu nền mà bạn muốn thay đổi, sau đó bạn có thể sử dụng thuộc tính backgroundColor để đặt màu nền

Ví dụ: hãy tạo một trang bằng HTML và thay đổi màu nền của phần nội dung thành màu xanh lá cây bằng cách sử dụng thuộc tính backgroundColor. Xem mã dưới đây

Bạn cũng có thể lấy phần tử có id hoặc tên của lớp. Để lấy một phần tử sử dụng id của nó, bạn có thể sử dụng hàm getElementById(). Để lấy một phần tử bằng cách sử dụng lớp của nó, bạn có thể sử dụng hàm getElementsByClassName()

Ví dụ: hãy lấy một phần tử theo id của nó và thay đổi màu nền của nó bằng cách sử dụng thuộc tính backgroundColor. Xem mã dưới đây

    


    

        Hello Wold
    
    

Đoạn mã trên sẽ chỉ thay đổi màu nền của phần tử có id

    


    

        Hello Wold
    

1 chứ không thay đổi toàn bộ phần nội dung. Bạn cũng thay đổi màu nền của một thành phần bằng cách sử dụng mã màu của các màu khác nhau thay vì thay đổi bằng tên màu

Hãy viết code để thay đổi màu nền của văn bản bằng một nút. Xem mã dưới đây

    


Change Color
Hello World

Trong mã này, bạn sẽ thấy một nút và một văn bản. Khi bạn nhấn nút, màu nền của văn bản sẽ thay đổi theo màu đã cho

Có một số cách để bạn có thể tự động thay đổi màu nền của Phần tử HTML trong JavaScript

1. Sử dụng phong cách. thuộc tính màu nền

Bạn có thể sử dụng phong cách. backgroundColor trực tiếp trong JavaScript để thay đổi màu nền của phần tử HTML

Ví dụ dưới đây sẽ thay đổi màu nền của phần tử nội dung thành màu đỏ ngay khi tài liệu HTML tải trên trình duyệt

Thao tác này sẽ thay đổi màu nền của toàn bộ trang thành màu đỏ

window.addEventListener('load', () => {
  document.body.style.backgroundColor = 'red';
});

dùng thử

Xem Bút thay đổi màu nền bằng JavaScript #5 – Khi nhấp chuột của SoftAuthor (@softauthor) trên CodePen

Hướng dẫn này dạy chúng ta thay đổi màu chữ của văn bản bằng JavaScript. Trong khi làm việc với JavaScript và phát triển frontend của ứng dụng, nó cần thay đổi màu chữ của văn bản bằng JavaScript khi có sự kiện xảy ra

Ví dụ: chúng tôi có một ứng dụng có thể bật hoặc tắt thiết bị. Chúng tôi có một nút để bật hoặc tắt thiết bị. Khi thiết bị đang bật, làm cho văn bản nút có màu xanh lá cây. Nếu không, làm cho văn bản nút màu đỏ

Vì vậy, trong những trường hợp như vậy, lập trình viên cần thay đổi màu chữ bằng JavaScript. Chúng tôi có một số phương pháp khác nhau để khắc phục sự cố ở bên dưới

Truy cập phần tử và thay đổi kiểu

Trong phần này, chúng ta sẽ truy cập phần tử theo id hoặc tên lớp bằng JavaScript. Người dùng có thể thay đổi kiểu dáng của phần tử bằng cách sử dụng. thuộc tính phong cách. Ngoài ra, chúng ta có thể thay đổi kiểu cụ thể, chẳng hạn như màu phần tử, màu nền, kích thước, v.v.

Trong trường hợp của chúng tôi, chúng tôi sẽ thay đổi các giá trị thuộc tính màu để thay đổi màu phông chữ. Người dùng có thể làm theo cú pháp dưới đây để thay đổi màu chữ bằng JavaScript

cú pháp

let element = document.getElementById(' element_id ');
element.style.color = colorCode;

Thông số

• colorName − Đây là màu mới mà người dùng muốn áp dụng cho văn bản. Nó có thể là tên màu, mã thập lục phân của màu hoặc giá trị RGB

Thí dụ

Trong ví dụ dưới đây, chúng tôi đã tạo một nút. Khi người dùng click vào nút đó, chúng ta sẽ gọi một hàm có tên là changeFontColor(). Bên trong hàm, chúng tôi đang truy cập phần tử nút bằng cách sử dụng id của nó và thay đổi màu bằng thuộc tính color của kiểu của nó

Khi người dùng nhấp vào nút 'thay đổi màu sắc', nó sẽ chuyển màu nút giữa màu xanh lá cây và màu đỏ

Thay đổi màu của tất cả văn bản

Trong phần này, chúng ta sẽ học cách thay đổi màu của toàn bộ văn bản. Bạn có thể xem xét kịch bản. Khi chúng tôi áp dụng chủ đề tối hoặc sáng cho ứng dụng, sẽ không tốt nếu thay đổi màu của từng phần tử một. Thay vào đó, chúng ta có thể thay đổi màu của tất cả văn bản nội dung chỉ bằng một cú nhấp chuột

Người dùng có thể làm theo cú pháp dưới đây để thay đổi màu chữ của văn bản nội dung

cú pháp

document.body.style.color = color

Thí dụ

Trong ví dụ dưới đây, chúng tôi sẽ thay đổi màu của toàn bộ văn bản, thay vì thay đổi văn bản của phần tử cụ thể

Khi người dùng nhấp vào nút, nó sẽ thay đổi màu của tất cả văn bản giữa màu hồng và màu xanh

Sử dụng phương thức String fontcolor()

Trong phần này, chúng ta sẽ tìm hiểu về phương thức fontcolor(). Chúng ta có thể áp dụng phương thức fontcolor() trên bất kỳ chuỗi văn bản nào và nó trả về phần tử HTML có thuộc tính color

Người dùng có thể làm theo cú pháp dưới đây để sử dụng phương thức fontcolor()

cú pháp

let text = "some text";
text.fontcolor("color");

Thông số

• color - Đó là mã màu hoặc tên màu

Giá trị trả về

• Phương thức fontcolor() trả về phần tử HTML

________số 8_______

Thí dụ

Trong ví dụ dưới đây, chúng ta sẽ thay đổi màu của một chuỗi cụ thể bằng phương thức String fontcolor()

Ở đầu ra, người dùng có thể quan sát thấy rằng khi họ nhấp vào nút, phông chữ của “hello world” sẽ chuyển sang màu xanh lá cây

Trong hướng dẫn này, chúng ta đã học cách thay đổi toàn bộ văn bản của phần nội dung chỉ bằng một cú nhấp chuột. Ngoài ra, chúng ta đã học cách thay đổi màu văn bản của một phần tử bằng cách sử dụng thuộc tính style của phần tử đó. Trong phần trước, chúng ta đã tìm hiểu về phương thức fontcolor() không được dùng nữa nên không được khuyến khích sử dụng

Làm cách nào để thay đổi màu văn bản trong hàm JavaScript?

Làm cách nào để thay đổi màu của một đối tượng trong JavaScript?

Làm cách nào để thay đổi màu nền trong JavaScript?

Làm cách nào để xác định màu trong JavaScript?