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

Để thay đổi màu phông chữ của Phần tử HTML bằng JavaScript, hãy tham chiếu đến phần tử HTML này và gán giá trị màu bắt buộc cho thuộc tính element.style.color

Trong ví dụ sau, chúng tôi sẽ thay đổi màu phông chữ của Phần tử HTML có id "myElement" thành màu "#FF0000", trong JavaScript, sử dụng thuộc tính element.style.color

ví dụ. html

► Chạy ⟳ Đặt lại

Phần kết luận

Trong Hướng dẫn JavaScript này, chúng ta đã học cách thay đổi màu phông chữ của Phần tử HTML bằng JavaScript

Chúng ta có thể sử dụng hàm document.querySelector() của JavaScript để thực hiện việc này và chuyển vào bộ chọn CSS cho phần tử mà chúng ta muốn thay đổi

	const element = document.querySelector(".content");

Bây giờ chúng ta đã có phần tử, chúng ta có thể tiến hành thay đổi màu của văn bản

Để thay đổi màu của văn bản, chúng tôi sẽ đặt thuộc tính style.color của nó. Đây là một thuộc tính tích hợp sẵn cho các phần tử HTML đại diện cho màu của văn bản

Tất cả những gì chúng ta cần làm là thay đổi thuộc tính này thành màu mà chúng ta muốn và trình duyệt sẽ lo phần còn lại

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thay đổi màu văn bản của phần tử html bằng JavaScript

Hãy xem xét, chúng tôi có đánh dấu html sau

<div id="container">
   <p>Hello this is some text</p>
</div>

Bây giờ, chúng tôi muốn thay đổi văn bản hoặc màu phông chữ của nội dung có bên trong phần tử <div>

Thay đổi màu văn bản

Để thay đổi màu văn bản của một phần tử nhất định, trước tiên chúng ta cần truy cập phần tử đó bên trong JavaScript bằng cách sử dụng các phương thức document.getElementId() hoặc document.querySelector() và đặt thuộc tính style.color của phần tử thành màu bạn muốn

❮ Tham chiếu chuỗi JavaScript

Ví dụ

let text = "Xin chào thế giới. ";
hãy để kết quả = văn bản. fontcolor("xanh");

Định nghĩa và cách sử dụng

Chuỗi fontcolor() không được dùng trong JavaScript

Tránh sử dụng nó

Nó có thể ngừng hoạt động trong trình duyệt của bạn bất cứ lúc nào

Phương thức

<div id="container">
   <p>Hello this is some text</p>
</div>

chuỗi

Thẻ không được hỗ trợ trong HTML5

cú pháp

chuỗi. màu phông chữ ("màu")

Thông số

Giá trị trả về

Ví dụ

Đặt màu văn bản cho các phần tử khác nhau

tài liệu. getElementById("myH2"). Phong cách. color="#ff0000";
tài liệu. getElementById("myP"). Phong cách. color = "đỏ tươi";
tài liệu. getElementById("myP2"). Phong cách. color="blue";
tài liệu. getElementById("myDiv"). Phong cách. color="blue nhạt";

Định nghĩa và cách sử dụng

Thuộc tính color đặt hoặc trả về màu của văn bản

Hỗ trợ trình duyệt

cú pháp

Trả về thuộc tính màu

Đặt thuộc tính màu

vật. Phong cách. màu = "màu. ban đầu. thừa kế"

Giá trị tài sản

chi tiết kỹ thuật

Thêm ví dụ

Ví dụ

Trả lại màu văn bản của một

thành phần

cảnh báo (tài liệu. getElementById("myP"). Phong cách. màu);

Trang liên quan

hướng dẫn CSS. Văn bản CSS

tham chiếu CSS. thuộc tính màu

Với

<div id="container">
   <p>Hello this is some text</p>
</div>

<div id="container">
   <p>Hello this is some text</p>
</div>

Tuy nhiên, trong trường hợp của bạn, bạn chỉ muốn sửa đổi một thuộc tính của phần tử (thay đổi màu của văn bản bên trong nó), vì vậy bạn giải quyết thuộc tính

<div id="container">
   <p>Hello this is some text</p>
</div>

Để thay đổi màu của văn bản, bạn có thể sử dụng phương thức “getElementById()” với “style. thuộc tính màu sắc. 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 màu với sự trợ giúp của kiểu HTML. thuộc tính màu

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 color với sự trợ giúp của phương thức getElementById()

tài liệu. getElementById("id").kiểu dáng . màu = "màu";

“Id” 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 phần tử đó bằng cách sử dụng kiểu. thuộc tính màu

Hướng tới ví dụ dưới đây để hiểu khái niệm đã nêu

Ví dụ

First, we will create a heading using

tag and assign an id “id” that is used to access the h4 element, then, create a button that invokes a function named “changeColor()” defined in a JavaScript(JS) file when the onclick event of the added button gets triggered:

< h4 id ="id"><Welcome to LinuxHinth4>

<button type="button" onclick="changeColor()">Click to See The Magicbutton>

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ó cho phương thức getElementById() rồi thay đổi màu của nó

function changeColor () {

tài liệu. getElementById("id").kiểu dáng . 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"> tập lệnh >

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 “đỏ”

Hãy xem phương pháp khác

Phương pháp 2. Thay đổi màu văn bản Sử dụng kiểu. 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 phương thức “querySelector()” với kiểu. thuộc tính màu. Nó truy cập phần tử có cả id hoặc lớp được chỉ định trong khi phương thức getElementById() chỉ tìm nạp phần tử có 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 thuộc tính color với sự trợ giúp của phương thức querySelector()

tài liệu. Bộ chọn truy vấn("id/className").kiểu dáng . màu = "màu";

Ví dụ

Here, we will use the

tag to add a paragraph with class named “color”, that will help to access the

element and a button that will call the JavaScript “changeColor()” method when its onclick event will be triggered:

< p lớp="màu">Welcome to LinuxHintp>

<button onclick="changeColor()">Click to See The Magicbutton>

Trong định nghĩa của phương thức “changeColor()”, chúng ta sẽ gọi phương thức “querySelector()” bằng cách truyề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ó, sau đó áp dụng thuộc tính color cho nó

function changeColor () {

tài liệu. Bộ chọn truy vấn(". màu") . kiểu dáng . color = "Magenta";

}

Tuy nhiên, để sử dụng id trong phần tử HTML và truy cập nó bằng phương thức querySelector(), hãy thêm dấu “#” với tên id

tài liệu. Bộ chọn truy vấn("#color").kiểu dáng . color = "Magenta";

đầ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

Phần kết luận

Để thay đổi màu văn bản, bạn có thể sử dụng kiểu. 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 chỉ định hoặc lớp bằng cách chỉ định (#) hoặc (. ) dấu hiệu, 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

Làm cách nào để thay đổi màu văn bản dựa trên giá trị trong JavaScript?

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

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

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