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 to set the capitalization of a text with JavaScript?
To set the capitalization, use the textTransform property in JavaScript. Set it to capitalize, if you want the first letter of every word to be a capital letter.
Syntax
element.style.textTransform = "value";
The textTransform property accepts these values:
-
capitalize- Capitalizes the first letter of each word -
uppercase- Converts all text to uppercase -
lowercase- Converts all text to lowercase -
none- Removes any text transformation
Example: Capitalizing Text
You can try to run the following code to capitalize text with JavaScript:
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">Capitalize Text</button>
<div id="myID">
This is demo text! This is demo text!
</div>
<script>
function display() {
document.getElementById("myID").style.textTransform = "capitalize";
}
</script>
</body>
</html>
Multiple Text Transform Examples
<!DOCTYPE html>
<html>
<body>
<p id="text1">hello world from javascript</p>
<p id="text2">hello world from javascript</p>
<p id="text3">HELLO WORLD FROM JAVASCRIPT</p>
<button onclick="transformText()">Transform Text</button>
<script>
function transformText() {
document.getElementById("text1").style.textTransform = "capitalize";
document.getElementById("text2").style.textTransform = "uppercase";
document.getElementById("text3").style.textTransform = "lowercase";
}
</script>
</body>
</html>
Comparison of Text Transform Values
| Value | Effect | Example Input | Example Output |
|---|---|---|---|
capitalize |
First letter of each word uppercase | hello world | Hello World |
uppercase |
All letters uppercase | hello world | HELLO WORLD |
lowercase |
All letters lowercase | HELLO WORLD | hello world |
none |
No transformation | HeLLo WoRLd | HeLLo WoRLd |
Key Points
- The
textTransformproperty changes visual appearance only, not the actual text content - Changes are applied via CSS styling, so they persist until modified or reset
- Use
textTransform = "none"to remove any previous transformations
Conclusion
JavaScript's textTransform property provides an easy way to change text capitalization dynamically. Use "capitalize" for title case, "uppercase" for all caps, or "lowercase" for all lowercase text styling.
Updated on: 2026-03-15T23:18:59+05:30
274 Views
Advertisements