<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
">
</
head
>
<
body
>
<
h2
style
=
"color:green"
>
GeeksforGeeks
</
h2
>
<
h3
style
=
"font-style:italic;"
>
How to check whether the style of the font is normal,
italic or oblique with JavaScript?
</
h3
>
<
div
id
=
"updatebox"
style="width:400px;
height:auto;
border: 2px solid green;
padding:0.5rem 2rem">
I will display the font-style of
the above <h3> element.
</
div
>
<
br
><
button
onclick
=
"checkFontStyle()"
>
Click here to konw the font style of <h3>
</
button
>
<
button
onclick
=
"changeFontStyle()"
>
Click here to change the font style of <h3>
</
button
>
<
script
>
let changeFontStyle = () => {
var fontStyle =
document.getElementsByTagName('h3')[0].style.fontStyle;
if (fontStyle == 'italic') {
document.getElementsByTagName('h3')[0]
.style.fontStyle = 'normal';
} else if (fontStyle == 'oblique') {
document.getElementsByTagName('h3')[0]
.style.fontStyle = 'italic';
} else if (fontStyle == 'normal') {
document.getElementsByTagName('h3')[0]
.style.fontStyle = 'oblique';
}
}
let checkFontStyle = () => {
var fontStyle = document.getElementsByTagName('h3')[0]
.style.fontStyle;
if (fontStyle == 'italic') {
document.getElementById('updatebox')
.innerHTML =
"font-style of the above <h3> element is italic.";
} else if (fontStyle == 'oblique') {
document.getElementById('updatebox')
.innerHTML =
"font-style of the above <h3> element is oblique.";
} else if (fontStyle == 'normal') {
document.getElementById('updatebox')
.innerHTML =
"font-style of the above <h3> element is normal.";
}
}
</
script
>
</
body
>
</
html
>