Membahas tentang Javascript memang tidak ada hentinya, tidak bisa di pungkiri memang Javascript adalah bahasa pemrogramman yang sangat powerfull baik dari sis client maupun server. Nah klai ini saya akan menshare bagaimana cara Membuat Tombol Ubah Size Font dengan Javascript, langsung 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>Membuat 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 software 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 elemen = document.getElementById(‘text’);
function kecil(){
elemen.className = “kecil”
}
function besar(){
elemen.className = “besar”
}
function besar30(){
elemen.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
sekian tutorial Membuat Tombol Ubah Size Font dengan Javascript, semoga bermanfaat..:D
The post Membuat Tombol Ubah Size Font dengan Javascript appeared first on Kursus Website Terbaik.