How to change font size in HTML page dynamically using Java Script.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="populatecombo()">
<p>Click "Try it" to display the value.</p>
<div id="combodiv"></div>
<br><br>
<div id="demo">Font width changed</div>
<script>
function populatecombo()
{
var s="Select width : <select id='combo' onchange='myFunction()'>";
for(var i=1;i<=100;i++)
s+="<option id=" + i + " value=" + i + ">" + i + "</option>";
s+="</select>";
document.getElementById("combodiv").innerHTML=s;
document.getElementById("combo").value=10;
document.getElementById("demo").style.font = "italic small-caps bold " + document.getElementById("combo").value + "px arial, sans-serif";
}
function myFunction()
{
document.getElementById("demo").style.font = "italic small-caps bold " + document.getElementById("combo").value + "px arial, sans-serif";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="populatecombo()">
<p>Click "Try it" to display the value.</p>
<div id="combodiv"></div>
<br><br>
<div id="demo">Font width changed</div>
<script>
function populatecombo()
{
var s="Select width : <select id='combo' onchange='myFunction()'>";
for(var i=1;i<=100;i++)
s+="<option id=" + i + " value=" + i + ">" + i + "</option>";
s+="</select>";
document.getElementById("combodiv").innerHTML=s;
document.getElementById("combo").value=10;
document.getElementById("demo").style.font = "italic small-caps bold " + document.getElementById("combo").value + "px arial, sans-serif";
}
function myFunction()
{
document.getElementById("demo").style.font = "italic small-caps bold " + document.getElementById("combo").value + "px arial, sans-serif";
}
</script>
</body>
</html>
No comments:
Post a Comment