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
HTML DOM Style fontVariant Property
The HTML DOM Style fontVariant property is used for setting or returning if the font should be converted to small caps or not. In small caps all the lowercase letters are converted to uppercase with their size same as lowercase letters. Uppercase letters remain unaffected.
Following is the syntax for −
Setting the fontVariant property −
object.style.fontVariant = "normal|small-caps|initial|inherit"
The above property values are explained as follows −
| Value | Description |
|---|---|
| normal | Thefont is set to normal and this is the default value. |
| small-caps | Itdisplays the form in small capital letters. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the fontVariant propert −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontVariant() {
document.getElementById("demo1").style.fontVariant="small-caps";
document.getElementById("demo2").style.fontVariant="small-caps";
document.getElementById("Sample").innerHTML="The font variant has been changed to small caps.";
}
</script>
</head>
<body>
<div id="demo1" >This is demo text</div>
<div id="demo2">This is demo text</div>
<p>Change the above text inside divs font variant property by clicking the below button</p>
<button onclick="changeFontVariant()">Change fontStyle </button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change font Variant” button −
Updated on: 24-Oct-2019
17 Views
Advertisements