페이지 글꼴 크기를 변경하는 JQuery 구현 코드(웹 페이지 글꼴 크기를 실시간으로 변경)_jquery

/*
글꼴 크기를 늘리거나 줄입니다. 페이지를 원래 크기로 복원하려면
HTML 페이지에 세 가지 요소를 정의해야 합니다.
요소의 클래스는 ResetFont, 증가Font 및 감소Font입니다.
이 파일의 JQuery 이벤트에서 다음 이벤트를 클릭합니다. 크게, 작게, 원래 크기로 복원하기 위해 세 가지 요소가 각각 정의됩니다.
*/
$(function () {
//글꼴 크기 가져오기, 글꼴 크기는 html 아래에 정의됩니다. tag
var originalFontSize = $("html" ).css("font-size");
//기본 글꼴 크기 복원
$(".resetFont").click(function () { $(".increaseFont").click(function () {
//현재 글꼴 크기 접미사 가져오기 px,pt,pc
var currentFontSize = $("html").css("font-size");
//현재 글꼴 크기를 가져오고,parseFloat()를 float 유형으로 변환하고 접미사를 제거합니다.
var currentFontSizeNumber = parseFloat( currentFontSize);
//새로 정의된 글꼴 ​​크기
var newFontSize = currentFontSizeNumber * 1.1;
//스타일 시트 다시 작성
$("html").css("font-size", newFontSize );
//JavaScript는 아래쪽으로 실행되지 않습니다
return false;
})

//글꼴을 줄이면 요소의 클래스가 감소Font로 정의됩니다. ".decreaseFont").click(function () {
//현재 글꼴 크기 접미사 가져오기 px, pt, pc
var currentFontSize = $("html").css("font-size"); //스타일 시트 다시 작성
$("html").css( "font-size", newFontSize)
//JavaScript는 아래쪽으로 실행되지 않습니다
return false; );
});


웹 글꼴 실시간 변경, jQuery 버전
웹 페이지의 글꼴 크기를 적시에 변경하고 jQuery를 도입하고 제한 사항을 추가합니다. 일부 무의미한 기능을 방지하기 위해 확대할 수 있는 최대 자릿수나 축소할 수 있는 최소 횟수를 제한합니다. 글꼴 크기가 지정된 값에 도달하면 다시 축소 기능이 작동하지 않는 것 같습니다. 더 사용자 친화적이 되십시오.







적시에 웹페이지 글꼴 크기 변경, jQuery 버전