Membuat Tombol Ubah Size Font dengan Javascript
Membahas mengenai Javascript memang tak ada hentinya, tak dapat di pungkiri memang Javascript yakni bahasa pemrogramman yang betul-betul powerfull bagus dari sis client maupun server. Nah klai ini saya akan menshare bagaimana cara Membuat Tombol Ubah Size Font dengan Javascript, seketika saja kita praktekan teman teman.
buka text editor kalian dan ketikan kode html di bawah ini dan beri nama dengan nama index.html
index.html
</body>
</html>
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Merancang Tombol Ubah Size Font dengan Javascript</title>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u crossorigin=anonymous>
<!-- Optional theme -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css integrity=sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp crossorigin=anonymous>
<link rel=stylesheet href=style.css>
</head>
<body>
<div class=container>
<div class=row>
Ukuran font :
<a href=# style=font-size: 15px; id=kecil onclick=kecil()>Klik ini : ukuran 15px</a> |
<a href=# id=besar style=font-size: 18px; onclick=besar()>Klik ini : ukuran 18px</a> |
<a href=# id=besar style=font-size: 30px; onclick=besar30()>Klik ini : ukuran 30px</a>
<div class=post bg-primary>
<p class=teks id=text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem aplikasi like Aldus PageMaker including versions of Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, libero. Nostrum dolores deserunt aliquid similique, consequuntur neque dolorem adipisci voluptatibus quibusdam magnam suscipit quo tempore natus ducimus alias quam voluptatem!.</p>
</div>
</div>
</div>
</body>
</html>
lalu setelah tag penutup </div> terakhir ketika kode javascript berikut:
<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>
<script>
var faktor = document.getElementById(‘text’);
function kecil(){
faktor.className = “kecil”
}
function besar(){
faktor.className = “besar”
}
function besar30(){
faktor.className = “besar30”
}
</script>
terakhir ketikan kode css berikut dan beri nama dengan nama style.css
style.css
p {
font-size: 10px;
}
.kecil{
font-size: 15px;
background: #123;
transition: background 2s;
padding: 20px;
color: #fff;
}
.besar{
font-size: 18px;
background: #123;
transition: background 2s;
padding: 20px;
color: #fff;
}
.besar30{
font-size: 30px;
background: #123;
transition: background 2s;
padding: 20px;
color: #fff;
}
a{
text-decoration: none;
border-bottom: 2px solid #123;
color: #123;
}hasilnya seperti di bawah ini
demikianlah panduan Membuat Tombol Ubah Size Font dengan Javascript, semoga bermanfaat..:D
Sumber https://kursuswebsite.org
