Tìm kiếm

View Full Version: Bộ nút tăng giảm kích cỡ font chữ trong web

Post by: admin
(06.05.2020 / 07:17)
Cỡ chữ +A | =A | -A

Bộ 3 nút điều chỉnh size text giúp người truy cập web có thể tăng giảm kích thước font chữ cho phù hợp theo sở thích.

demo: http://www.code1k.com/demo/2012/07/bo-nut-tang-giam-font-chu-trong-web.html

code

Code
<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>


Nút tăng giảm
Code
<a href="javascript:ts('body',1)" title="Tăng cỡ chữ"><img src="http://1.bp.blogspot.com/-IX2Mwb_CtmY/T_EMRErYmRI/AAAAAAAAIqI/juFXvkfvhNI/s1600/font-add-2-code1k.com.png" alt="+A" /> Tăng cỡ chữ</a> <a href="#" onclick="location.reload(true);" title="Cỡ chữ mặc định"><img src="http://1.bp.blogspot.com/-qeUtfke_r_Q/T_EMQZ-BhlI/AAAAAAAAIqE/m2EomkrMmsM/s1600/font-2-code1k.com.png" alt="=A" /> Mặc định</a> <a
href="javascript:ts('body',-1)" title="Giảm cỡ chữ"><img src="http://4.bp.blogspot.com/-UXwx-qTZJ4E/T_EMR-XQafI/AAAAAAAAIqQ/feYUYwfIEQs/s1600/font-delete-2-code1k.com.png" alt="-A" />Giảm cỡ chữ</a>
<!-- DoDuong.Com -->


5 Chủ đề khác cùng chuyên mục
  1. Các hàm cần thiết để tạo thẻ meta description cho một Website
  2. Script chống copy bài viết cho website
  3. Code php Dọn dẹp file error_log trên hosting
  4. Javascript: Chống bôi đen đoạn text trên website
5 Chủ đề ngẫu nhiên
  1. Javascript: Chống bôi đen đoạn text trên website 19 lượt xem
  2. Code php Dọn dẹp file error_log trên hosting 26 lượt xem
  3. Truyện tình yêu: Đừng Yêu Tôi Đồ Ngốc 213 lượt xem
  4. Tối Ưu Web Để Lên Google Tốt Hơn 29 lượt xem
  5. Script chống copy bài viết cho website 27 lượt xem
Textlink: Blog Công Nghệ