페이지 글꼴 크기를 변경하는 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 버전

확대<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>축소</title> <style> * { margin:0; padding:0; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style> <!-- 引入jQuery --> 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. 이것은 일부 텍스트입니다. <div class="msg"> <div class="msg_caption"> <span class="bigger"> </span> <span class="smaller"></span> </div> <div> <p id="para">[Ctrl A 모두 선택 참고: </p>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </div>]</div>