Cách đổi màu theo id trong JavaScript
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 Show
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ểuTrong 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áplet element = document.getElementById(' element_id '); element.style.color = colorCode; Thông số
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ảnTrong 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ápdocument.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áplet text = "some text"; text.fontcolor("color"); Thông số
Giá trị trả về
some text 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 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ềnBạ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 đỏ
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 Đưa ra một tài liệu HTML và nhiệm vụ là thay đổi màu nền của tài liệu bằng JavaScript và jQuery. Cách tiếp cận 1. Cách tiếp cận này sử dụng JavaScript để thay đổi màu nền sau khi nhấp vào nút. Sử dụng HTML DOM Style backgroundColor Property để thay đổi màu nền sau khi nhấp vào nút. Thuộc tính này được sử dụng để thiết lập màu nền của một phần tử. Thí dụ. Ví dụ này thay đổi màu nền với sự trợ giúp của JavaScript. html
đầu ra.
Cách tiếp cận 2. Cách tiếp cận này sử dụng jQuery để thay đổi màu nền sau khi nhấp vào nút
Thí dụ. Ví dụ này thay đổi màu nền với sự trợ giúp của JQuery. html
đầu ra
JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này jQuery là một thư viện JavaScript mã nguồn mở giúp đơn giản hóa các tương tác giữa một tài liệu HTML/CSS, nó nổi tiếng rộng rãi với triết lý “Viết ít hơn, làm nhiều hơn”. Bạn có thể học jQuery từ đầu bằng cách làm theo Hướng dẫn jQuery và Ví dụ về jQuery này Làm cách nào để thay đổi màu nền bằng id trong JavaScript?Để thay đổi màu nền của một thành phần trong JavaScript, có thể sử dụng thuộc tính “backgroundColor” với phương thức color để truy cập id cụ thể và chỉ định một màu nền cụ thể. It is used with the “RGB” code to apply a specific shade of color to the selected HTML element.
Làm cách nào để thay đổi màu dựa trên giá trị JavaScript?Để thay đổi màu của phần tử dựa trên giá trị của bộ chọn màu, chúng ta phải sử dụng sự kiện onclick() của phần tử và thay đổi thuộc tính màu CSS của nó theo giá trị đã chọn . Giá trị này xuất hiện dưới dạng thuộc tính giá trị của bộ chọn màu. . This value appears as color picker's value attribute.
Làm cách nào để thay đổi màu động trong JavaScript?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. . Sử dụng phong cách. Thuộc tính màu nền Sử dụng ClassList. cộng() Sử dụng setAttribute() Thay đổi màu nền của div Tự động thay đổi màu nền khi nhấp vào nút Làm cách nào để thay đổi màu văn bản trong JavaScript?Sử dụng Phương thức fontcolor() Chuỗi
. |