Memperbesar dan Memperkecil Text pakai Javascript OnClick

Author : Sigit Purnomo | Released : July 07, 2015 | Category :
Untuk mengisi blog saya ini, kali ini saya masih mengangkat tema seputar tutorial blogging.
Menjadi seorang blogger tentu tidak akan pernah lepas dengan yang namanya javascript. Ternyata ada banyak trik-trik yang mungkin belum pernah Anda coba atau temukan sebelumnya dengan post saya kali ini. Ini berkaitan dengan menentukan besar font pada sebuah teks.

Namun dengan menggunakan javascript ini kita memberikan pilihan kepada pengunjung apakah mereka ingin memperbesar tulisan yang ada pada postingan kita atau tidak.

Bila tertarik, silahkan salin  kode-kodenya berikut ini
<html>
<head>
<script>
function resizeText(multiplier) {
if ( document.body.style.fontSize == "" ) {
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
</script>
</head>

<body>
<p>TEKS ANDA DISINI</p>
<p>TEKS ANDA DISINI</p>
<p>TEKS ANDA DISINI</p>

<div onclick="resizeText(1)"><b style="font-size:16px!important;padding:3px 10px;color:#fff;background:#333;cursor:pointer;">Besarkan Text Ini</b></div>

<div onclick="resizeText(-1)" style="margin-top:8px"><b style="font-size:16px!important;padding:3px 10px;color:rgb(33, 252, 8);background:#F48508;cursor:pointer;">Kecilkan</b></div>
</body>
</html>

Google+

Linkedin

Silahkan berkomentar sesuai topik yang dibahas