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
How to make text bold, italic and underline using jQuery
To make text bold, italic and underline using jQuery, use the jQuery css() method with the CSS properties font-style, font-weight and text-decoration. The css() method allows you to dynamically modify CSS properties of HTML elements.
Here are the key CSS properties used for text formatting ?
- font-weight ? Set to "bold" to make text bold
- font-style ? Set to "italic" to make text italic
- text-decoration ? Set to "underline" to underline text
Example
You can try to run the following code to learn how to make text bold, italic and underline using 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({
"font-style": "italic",
"font-weight": "bold",
"text-decoration": "underline"
});
},
mouseleave: function(){
$(this).css({
"font-style": "normal",
"font-weight": "normal",
"text-decoration": "none"
});
}
});
});
</script>
</head>
<body>
<p>Move the mouse pointer on this text to make it bold, italic and underlined.</p>
<p>This is another paragraph to test the effect.</p>
</body>
</html>
In this example, when you hover over any paragraph, the text becomes bold, italic, and underlined. When you move the mouse away, the text returns to its normal appearance.
Conclusion
Using jQuery's css() method with font-style, font-weight, and text-decoration properties provides an easy way to dynamically format text with bold, italic, and underline styles based on user interactions.
4K+ Views
