04/10/2018, 20:14

Điều chỉnh kích thước Font chữ theo ý muốn bằng Javacript

Đoạn script sau sẽ giúp bạn cho phép khách viếng website của bạn có thể tăng to hoặc nhỏ kích thước font chữ . Điều này rất hữu ích khi có nhiều người có vấn đề về mắt khi họ không thể đọc những dòng chữ nhỏ. Để đoạn code này chạy tốt trên web của bạn thì bạn cần sử dụng kích thước font là ...

Điều chỉnh kích thước Font chữ theo ý muốn bằng Javacript

Đoạn script sau sẽ giúp bạn cho phép khách viếng website của bạn có thể tăng to hoặc nhỏ kích thước font chữ . Điều này rất hữu ích khi có nhiều người có vấn đề về mắt khi họ không thể đọc những dòng chữ nhỏ. Để đoạn code này chạy tốt trên web của bạn thì bạn cần sử dụng kích thước font là pixel (px) hơn là kích thước font sử dụng ’em’ hoặc ‘%’. Nếu đoạn script sau không tìm thấy kích thước font trong web của bạn thì nó sẽ tự động đặt giá trị là 12px.

var min=8;
var max=18;
function increaseFontSize() {

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 decreaseFontSize() {
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"

}
}

Cách sử dụng :
Chèn đoạn code sau vào bất cứ nơi nào mà bạn muốn hiển thị công cụ điều khiển font chữ

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

Chúc các bạn thành công !

Tags: font size javacripts code thu thuat javacript

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

0