Javascript DOM CSS Style fontVariant Property

Introduction

Set a <p> element to a small-caps font: 

document.getElementById("myP").style.fontVariant = "small-caps";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<p id="myP">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>THIS IS ANOTHER PARAGRAPH.</p>

<button type="button" onclick="myFunction()">
Set the p element with id="myP" to a small-caps font
</button>//  w w w .  ja  v a 2s . c om

<script>
function myFunction() {
  document.getElementById("myP").style.fontVariant = "small-caps";
}
</script>

</body>
</html>

The fontVariant property sets or gets whether the font should be displayed in small capital letters.

All lowercase letters will be converted to uppercase, but the letters will have a smaller font-size compared to the rest of the text.

Property Values

Value Description
normal The font is normal. default
small-caps The font is displayed in small capital letters
initialSets this property to its default value.
inheritInherits this property from its parent element.

The fontVariant property returns a String representing a font in either normal or small capital letters.




PreviousNext

Related