Thủ thuật javacript : Thay đổi kích cỡ chữ trên web

Trong bài viết hướng dẫn sử dụng JavaScript khá ngắn gọn này, Chúng tôi sẽ chỉ bạn cách dùng vài đoạn mã đơn giản để thay đổi kích cỡ chữ trên trang web của mình chỉ với một vài cú nhấn chuột.

Trên thực tế, hầu như tất cả các trình duyệt có một tính năng để kiểm soát các ký tự trên các trang web bạn truy cập, bằng cách nhấn phím Ctrl + (phóng to) hoặc – (thu nhỏ). Nhưng có một cách khác bổ sung thêm một chức năng “kích thước font chữ động” trên trang web của bạn bằng cách sử dụng javascript.
Dưới đây là một kịch bản có thể được sử dụng để tạo điều kiện thuận lợi cho các khách truy cập để kiểm soát kích thước font chữ của văn bản trên mỗi trang của trang web / blog của bạn. Điều này sẽ rất hữu ích cho độc giả cuộc đấu tranh với các chữ cái nhỏ, và cho phép người để phóng to kích thước font chữ của văn bản của bạn, vì vậy họ dễ dàng hơn để đọc. đơn giản là chép đoạn code sau vào blog hay web của bạn:

<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>

Việc cuối cùng là các bạn chèn đoạn code sau đây vào vị trí mà bạn muốn tạo chức năng to nhỏ phông chữ

<a href=”javascript:zoominLetter();”>A</a>
<a href=”javascript:zoomoutLetter();”>a</a>

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

Chuyên Mục: Javascript

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