Hướng dẫn làm tính năng tăng giảm cỡ chữ cho website với java script

Đoạn java script tăng giảm cỡ chữ:

<script type=”text/javascript”>
var min=8;
var max=18;
function zoominLetter() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace(“px”,””));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+”px”
}
}
function zoomoutLetter() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace(“px”,””));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+”px”
}
}
</script>

<script type=”text/javascript”>
$(document).ready(function() {
$(“.tabs-menu a”).click(function(event) {
event.preventDefault();
$(this).parent().addClass(“current”);
$(this).parent().siblings().removeClass(“current”);
var tab = $(this).attr(“href”);
$(“.tab-content”).not(tab).css(“display”, “none”);
$(tab).fadeIn();
});
});
</script>

Tạo nút tăng giảm:

<a href=”javascript:zoominLetter();” title=”Tăng cỡ chữ”>A+</a>
<a href=”javascript:zoomoutLetter();” title=”Giảm cỡ chữ”>a-</a>

Đã xong, anh em copy vào triển thôi, ai thích đẹp có thể tạo nút bằng images + css  cho đẹp.

honest

Mình lập blog này với mục đích lưu lại + chia sẻ các các kiến thức mình đã biết hoặc đang tìm hiểu. Cơ bản giúp ích cho mình 🙂 Nhưng hy vọng sẽ mang lại sự khởi đầu thuận lợi cho người mới bắt đầu!