JavaScript thay đổi màu văn bản khi nhấp

thử thách 1. Thay đổi kích thước nút thành 300px cho chiều cao và trọng lượng, đồng thời thay đổi màu nền và phông chữ của nút

Cách thay đổi màu văn bản bằng JavaScript là một bài học tuyệt vời cho những người mới học ở mọi lứa tuổi. Bài học này bao gồm việc học với các màu sắc khác nhau, một cách thú vị để dạy với kết quả nhanh chóng. Tìm hướng dẫn từng bước dễ dàng để làm cho màu văn bản của bạn thay đổi và mã của bạn trở nên sống động. chúng tôi sử dụng www. viết mã. io để thử nghiệm và tìm hiểu và vui lòng tham khảo trang web viết mã này, https. //www. w3schools. com để nghiên cứu và chuyên môn về HTML

Tìm hiểu cách ghi đè màu lựa chọn văn bản mặc định bằng CSS

Chọn văn bản sau

Màu chọn văn bản mặc định

Màu lựa chọn văn bản tùy chỉnh

Sử dụng bộ chọn ::selection để ghi đè màu lựa chọn văn bản mặc định

Thí dụ

::-moz-selection { /* Code for Firefox */
  màu. màu đỏ;
  nền. màu vàng;
}

::selection {
  màu. màu đỏ;
  nền. màu vàng;
}

Mẹo. Đọc thêm về. bộ chọn lựa chọn trong Tài liệu tham khảo CSS của chúng tôi. CSS. lựa chọn tài sản

Để 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

Thí 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";

Thí 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 khi nhấp vào nút trong JavaScript?

Làm cách nào để thay đổi màu khi nhấp vào JavaScript?

Làm cách nào để thay đổi màu 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?