Nghiên cứu này sẽ minh họa các phương pháp thay đổi màu sắc của văn bản trong JavaScript.
Làm thế nào để thay đổi màu văn bản trong JavaScript?
Để thay đổi màu văn bản trong JavaScript, hãy sử dụng các phương pháp JavaScript được xác định trước được đề cập bên dưới:
- thuộc tính style.color với phương thức getElementById ()
- thuộc tính style.color với phương thức querySelector ()
Hãy giải thích các phương pháp này riêng lẻ.
Phương pháp 1: Thay đổi màu văn bản bằng cách sử dụng thuộc tính style.color với phương thức getElementById ()
Để thay đổi màu sắc của văn bản, bạn có thể sử dụng nút “ getElementById () ”Với phương pháp“ style.color ' tài sản. Trong trường hợp như vậy, phần tử văn bản có thể được truy cập bằng phương thức getElementById () và sau đó áp dụng thuộc tính color với sự trợ giúp của thuộc tính style.color HTML.
Cú pháp
Sử dụng cú pháp đã cho để thay đổi màu văn bản bằng cách sử dụng thuộc tính màu với sự trợ giúp của phương thức getElementById ():
tài liệu. getElementById ( 'Tôi' ) . Phong cách . màu sắc = 'màu sắc' ;Các ' Tôi ”Là id của phần tử được chỉ định để truy cập phần tử văn bản và sau đó thay đổi màu của nó bằng cách sử dụng thuộc tính style.color.
Hãy hướng tới ví dụ dưới đây để hiểu khái niệm đã nêu!
Thí dụ
Đầu tiên, chúng tôi sẽ tạo một tiêu đề bằng cách sử dụng gắn thẻ và gán một id “ Tôi 'Được sử dụng để truy cập phần tử h4, sau đó, tạo một nút gọi một hàm có tên' changeColor () ”Được xác định trong tệp JavaScript (JS) khi sự kiện onclick của nút đã thêm được kích hoạt:
< id h4 = 'Tôi' > Chào mừng bạn đến với LinuxHint h4 >< loại nút = 'cái nút' trong một cái nhấp chuột = 'changeColor ()' > Nhấp để xem điều kỳ diệu cái nút >
Trong tệp JS, hãy xác định một hàm có tên là “ changeColor () ”Và lấy tiêu đề bằng cách chuyển id của nó đến phương thức getElementById () và sau đó thay đổi màu của nó:
chức năng thay đổi màu sắc ( ) {tài liệu. getElementById ( 'Tôi' ) . Phong cách . màu sắc = 'màu đỏ' ;
}
Cuối cùng, chỉ định nguồn của tệp JavaScript bằng thẻ src trong tệp HTML:
< script src = './JSfile.js' > script >Có thể thấy từ đầu ra rằng khi nhấp vào nút đã thêm, phần tử văn bản đã đổi màu thành “ màu đỏ ”:
Hãy xem phương pháp khác!
Phương pháp 2: Thay đổi màu văn bản bằng cách sử dụng thuộc tính style.color với phương thức querySelector ()
Bạn cũng có thể thay đổi màu của văn bản bằng cách sử dụng “ querySelector () ”Với thuộc tính style.color. Nó truy cập phần tử bằng cả id hoặc lớp được gán trong khi phương thức getElementById () chỉ tìm nạp phần tử với id được chỉ định của nó.
Cú pháp
Sử dụng cú pháp sau để thay đổi màu văn bản bằng cách sử dụng thuộc tính màu với sự trợ giúp của phương thức querySelector ():
tài liệu. querySelector ( 'id / className' ) . Phong cách . màu sắc = 'màu sắc' ;Thí dụ
Ở đây, chúng tôi sẽ sử dụng để thêm một đoạn văn có lớp tên là “ màu sắc ”, Điều đó sẽ giúp truy cập phần tử
và một nút sẽ gọi JavaScript“ changeColor () ”Khi sự kiện onclick của nó sẽ được kích hoạt:
< P lớp = 'màu sắc' > Chào mừng bạn đến với LinuxHint P >< nút onclick = 'changeColor ()' > Nhấp để xem điều kỳ diệu cái nút >
Trong định nghĩa của “ changeColor () ', Chúng tôi sẽ gọi' querySelector () ”Bằng cách chuyển tên lớp với dấu chấm (.) Cho biết phần tử được truy cập dựa trên tên lớp của nó và sau đó áp dụng thuộc tính màu trên nó:
chức năng thay đổi màu sắc ( ) {tài liệu. querySelector ( '.màu sắc' ) . Phong cách . màu sắc = 'Đỏ tươi' ;
}
Tuy nhiên, để sử dụng một id trong một phần tử HTML và truy cập nó bằng phương thức querySelector (), hãy thêm “ # ”Ký với tên id:
tài liệu. querySelector ( '#màu sắc' ) . Phong cách . màu sắc = 'Đỏ tươi' ;Đầu ra
Chúng tôi đã tập hợp cách tiếp cận đơn giản nhất để thay đổi màu văn bản trong JavaScript.
Sự kết luận
Để thay đổi màu văn bản, bạn có thể sử dụng thuộc tính style.color với sự trợ giúp của phương thức getElementById () hoặc phương thức querySelector (). Phương thức getElementById () được sử dụng để truy cập phần tử HTML dựa trên id được chỉ định của nó, trong khi phương thức querySelector () truy cập phần tử dựa trên id được gán hoặc lớp bằng cách chỉ định các dấu (#) hoặc (.) Tương ứng. Nghiên cứu này đã minh họa quy trình đơn giản để thay đổi màu văn bản trong JavaScript.