Thay đổi màu văn bản khi nhấp vào nút 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 Trong bài đăng này, chúng ta sẽ tìm hiểu cách thay đổi màu của văn bản trong JavaScript. Chúng tôi sẽ tạo một dự án html-css-js nhỏ, chỉ chứa một nút và nhấp vào nút đó sẽ thay đổi màu của văn bản Tài sản để thay đổiChúng ta cần thay đổi thuộc tính màu của một thành phần. Trong ví dụ này, chúng tôi sẽ thay đổi màu của thành phần p hoặc đoạn văn Tạo một chỉ mục. tệp html có nội dung bên dưới
Mở tệp này trong trình duyệt yêu thích của bạn. Nó sẽ hiển thị một dòng văn bản với ba nút như bên dưới Để 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> 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 () { 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> 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 () { 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 Sự 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?Để thay đổi màu văn bản của phần tử khi nhấp chuột. . Thêm trình xử lý sự kiện nhấp chuột vào phần tử Gán đối tượng sự kiện cho một biến trong hàm Đặt sự kiện. Mục tiêu. Phong cách. thuộc tính color thành màu văn bản cụ thể Làm cách nào để thay đổi màu văn bản trong hàm JavaScript?Sử dụng Phương thức fontcolor() Chuỗi
. 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ử
Làm cách nào để thay đổi màu của văn bản bên trong một nút?Sử dụng dấu chấm phẩy để phân tách các phần tử kiểu khác nhau trong thẻ nút HTML. Màu chữ. trong dấu ngoặc kép sau "style=" . Phần tử này được sử dụng để thay đổi màu văn bản trong nút. Bạn có thể đặt các thành phần kiểu theo bất kỳ thứ tự nào trong dấu ngoặc kép sau "style=".
Làm cách nào để thay đổi văn bản trong JavaScript onClick?Giải thích . Đầu tiên chúng ta tạo hàm change_text() Sau đó, chúng tôi thêm tài liệu. getElementById(“bản trình diễn”). innerHTML chức năng bên trong và thêm văn bản mà chúng tôi muốn hiển thị Then after we create tag and a button.. Finally, when we click the button, it will change the text of the tag.. |