How to make a text italic using JavaScript

Javascript Web Development Front End Technology

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.