Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How can I change the text color with jQuery?
To change the text color with jQuery, use the jQuery css() method. The color CSS property is used to change text color.
Syntax
The basic syntax for changing text color using jQuery is ?
$(selector).css("color", "color-value");
Where selector is the element you want to target and color-value can be a color name, hex code, RGB value, or any valid CSS color format.
Example
You can try to run the following code to learn how to change text color with jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("color", "red");
},
mouseleave: function(){
$(this).css("color", "black");
}
});
});
</script>
</head>
<body>
<p>Move the mouse pointer on the text to change the text color.</p>
<p>This is another paragraph to test the color change.</p>
</body>
</html>
Additional Example - Direct Color Change
Here's a simpler example that changes text color immediately when the page loads ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myText").css("color", "blue");
$(".highlight").css("color", "#ff6600");
});
</script>
</head>
<body>
<p id="myText">This text will turn blue.</p>
<p class="highlight">This text will turn orange.</p>
</body>
</html>
Conclusion
Using jQuery's css() method with the color property provides a simple way to dynamically change text colors on your web pages, whether triggered by user interactions or page load events.
Updated on: 2026-03-13T19:08:14+05:30
13K+ Views
Advertisements