Merubah size tampilan font dengan JavaScript


Yohohoooo everybody, apa kabar neh ??? Moga2 sehat2 semua ya :D Ok all pada postingan ane yang kesekian ini ane akan mensharing bagaimana caranya mengubah ukuran tampilan font secara otomatis. Oh iya hampir lupa script ini dipakai di Joomla loh, sebenarnya ane terinspirasi untuk buat postingan ini ketika ane ikut Lomba Kompetensi Siswa nah salah satu poin penilaiannya tentang ini. Ya udah to the point aja langsung ya neh cekibroot
Pertama – tama buat dulu file JavaScriptnya, sekedar info script ini merupakan sebagian dari isi dari file Joomla yang bernama “md_stylechanger.js” jadi script ini bukan buatan ane melainkan ciptaan pegawai Joomla, kalau udah di copas trus save dengan name “perubah.js” atau terserah ente deh namanya
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*global window, localStorage, fontSizeTitle, bigger, reset, smaller, biggerTitle, resetTitle, smallerTitle, Cookie */
var defaultFontSize = 100;
var currentFontSize = defaultFontSize;
function setFontSize(fontSize){
document.body.style.fontSize = fontSize + '%';
}
function changeFontSize(sizeDifference){
currentFontSize = parseInt(currentFontSize, 10) + parseInt(sizeDifference * 5, 10);
if (currentFontSize > 180){
currentFontSize = 180;
} else if (currentFontSize < 60){
currentFontSize = 60;
}
setFontSize(currentFontSize);
}
function revertStyles(){
currentFontSize = defaultFontSize;
changeFontSize(0);
}
Nah untuk pengaplikasiannya buat sebuah file html, contohnya seperti script ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<script type="text/javascript" src="perubah.js"></script>
</head>
<title>Script perubah ukuran font</title>
<body>
<div id="fontsize">
<h3>Font size</h3>
<p class="fontsize">
<a onclick="changeFontSize(2); return false;" title="Increase size" class="larger" href="index.html">Bigger</a>
<a onclick="revertStyles(); return false;" title="Revert styles to  default" class="reset" href="index.html">Reset</a>
<a onclick="changeFontSize(-2); return false;" title="Decrease size" class="smaller" href="index.html">Smaller</a>
</p>
<p>Ukuran Fontnya pasti berubah</p>
</div>
</body>
</html>
Nah hasilnya nanti seperti ini untuk ukuran font standart :

Nah hasilnya nanti seperti ini untuk ukuran font yang paling besar :

Ini tampilan untuk ukuran font yang paling kecil :
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Show Parser Box