Categories
Posted on 02 Jun, 2022 17:18 pm, category: Web Apps Development |
Increase and Decrease Font of the article by raw JavaScript HTML and CSS
By Clicking the (+) button font will be increased and if we click the (-) button font will be decreased. Enjoy!
HTML, CSS and JavaScript code below:
<!DOCTYPE html>
<html>
<body>
<p id="article_description">This is a paragraph.</p>
<button type="button" onclick="increaseFont()" style="margin:5px; padding:5px 10px;">+</button>
<button type="button" onclick="decreaseFont()" style="margin:5px;padding:5px 10px">-</button>
<script type="script/javascript">
var i=14;
function increaseFont() {
if(i>25)
{
i;
}
else
{
i++;
document.getElementById("article_description").style.fontSize = i+"px";
}
}
function decreaseFont() {
if(i>12)
{
i--;
document.getElementById("article_description").style.fontSize = i+"px";
}
else
{
i;
}
}
</script>
</body>
</html>
Copy Link to Share:
https://www.mcqpractice.com/auth/index.php?page=../proverbs/article-details.php&id=84&t=Increase-and-Decrease-Font-of-the-article-by-raw-JavaScript-HTML-and-CSS
More articles you may like
