Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make a text italic using JavaScript
In this tutorial, we will learn to make a text italic using JavaScript. We give the italic property to a text to differentiate it from other text within the sentence.
In HTML, we can make a text italic by just adding the text within the 'i' tag. But sometimes, we have to make it dynamic, that not possible with HTML. Then, we have to use a programming language like JavaScript to make the text italic.
Let's have a look at how to make a text italic using JavaScript. Following are the ways by which we can make a text italic in JavaScript −
Using String italics() Method.
Using Style fontStyle Property.
By Creating DOM Italic Object.
Using String italics() Method
The italics() method is the method in JavaScript used to make the text italic. It does the same thing that the 'i' tag in HTML. This method can be invoked only on the strings. It also does not takes any arguments.
Syntax
All the users can follow the below syntax to use the italics() method to make a text italic using JavaScript −
var string = "<Type text here>"; string.italics();
Example
In the example below, we used the italics() method to make a text italic using JavaScript.
<html> <head> <title>JavaScript String italics() Method</title> </head> <body> <h3> Using the <i> italics() </i> method to make a text italic using JavaScript </h3> <p id="para"> </p> <script> var text = "Welcome to the JavaScript"; document.getElementById('para').innerHTML = text.italics(); </script> </body> </html>
In the above example, users can see that we have used the italics() method to make a text italic using JavaScript.
Using Style fontStyle Property
We can use the fontStyle property of the DOM style to make a text italic. We set this property to string value "italic".
Syntax
Following is the syntax to make a text italic using HTML DOM style fontStyle property −
document.getElementById("paragraph").style.fontStyle = "italic";
Example
In the below example, we are applying the italic style to text on a button click.
<html> <body> <p id="paragraph">Click the "Make italic" button to make these text italic.</p> <button onclick = "italic()"> Make italic </button> <script> function italic(){ document.getElementById("paragraph").style.fontStyle = "italic"; } </script> </body> </html>
In the above example, users can see that we have changed the style of the text to italic on clicking the button.
By Creating DOM Italic Object
The DOM(document object model) is a standard in JavaScript to access the elements in the document. We can add or access all elements of HTML through the DOM in JavaScript. We make our text italic in HTML by placing it inside the 'i' tag. In the same way, we can add the italic element and append the text inside it through the DOM in JavaScript.
Syntax
All the users can follow the below syntax to use the DOM Objects to make a text italic using JavaScript −
var var2 = document.createElement( <Add i tag here> ); var var3 = document.createTextNode( <Add text here> ); var2.appendChild(var3); document.getElementById( <Add tag id here> ).appendChild(var2);
Algorithms
Step-1 − Create an 'i' element using DOM.
Step-2 − Create a text node and add text to it.
Step-3 − Append the text node in the 'i' element.
Step-4 − Now, append the 'i' element to any container element.
Example
In the example below, we used the DOM object to make a text italic using JavaScript. The text in the document will change the style to italic on the button click.
<html> <body> <p id="para">Click the below buttom to make these text italic.</p> <button onclick = "italic()">italic</button> <script> function italic(){ var para = document.getElementById("para"); var add_element = document.createElement('i'); var text = document.createTextNode(para.innerHTML); add_element.appendChild(text); para.innerHTML = ""; para.appendChild(add_element); } </script> </body> </html>
In the above example, users can see that we have changed the text style to italic by clicking the button using DOM in JavaScript.
In this tutorial, we have learned about the two ways by which we can make a text italic in JavaScript. Among these, italics() is the method that makes a string italic. We also have used the DOM Objects to make a text italic using a custom logic in JavaScript. You can use both ways to make a text italic while the italics() is the simplest.
3K+ Views
