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 title event of the added button gets triggered:

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 title event will be triggered: