기사 텍스트 크기 function_javascript 기술의 js 구현 전체 예

이 기사의 예에서는 js를 사용하여 기사 텍스트의 글꼴 크기 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

텍스트 대, 중, 소는 사용자의 읽기 편의를 위해 많은 웹사이트에서 제공하는 기능입니다. 이 글에서 소개하는 텍스트 대, 중, 소 글꼴 크기 기능은 사용자가 선택한 후에 활성화할 수 있습니다. 동일한 웹사이트에서 다른 기사를 열면 사용자의 습관에 따라 글꼴 크기가 표시됩니다.

일부 대형 웹사이트에서 기사 제목 아래에 다양한 사람들의 독서 습관을 반영하는 데 사용되는 '대', '중', '소' 세 개의 버튼을 본 적이 있을 것입니다. 여기서는 이 방법을 소개하겠습니다. 이 방법은 다른 사람의 방법과 비교하여 자동 저장을 지원합니다. 한 번만 선택하면 다음에 읽을 때 좋아하는 글꼴 크기로 자동 조정됩니다.

JS 코드 부분:

먼저 다음 JS를 JS 파일이나 스크립트 태그에 넣으세요.

코드 복사 코드는 다음과 같습니다.

jQuery.cookie = 함수(이름, 값, 옵션) {
If (값 유형 != '정의되지 않음') {
옵션 = 옵션 || {};
If (값 === null) {
              값 = '';
options.expires = -1;
}
      var 만료 = '';
If (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
          var 날짜;
If (typeof options.expires == 'number') {
날짜 = 새로운 날짜();
date.setTime(date.getTime() (options.expires * 24 * 60 * 60 * 1000));
              } else {
날짜 = options.expires;
            }
만료 = '; 만료=' date.toUTCString();
}
        var 경로 = 옵션.경로 ? '; 경로=' 옵션.경로 : '';
        var 도메인 = 옵션.도메인 ? '; 도메인=' 옵션.도메인 : '';
        var secure = options.secure ? ';';
           document.cookie = [이름, '=', encodeURIComponent(값), 만료, 경로, 도메인, 보안].join('');
} 그 밖의 {
        var cookieValue = null;
If (document.cookie && document.cookie != '') {
            var cookie = document.cookie.split(';');
for (var i = 0; i < cookie.length; i ) {
              var cookie = jQuery.trim(cookies[i]);
If (cookie.substring(0, name.length 1) == (name '=')) {
                      cookieValue = decodeURIComponent(cookie.substring(name.length 1));
휴식;
                }
            }
}
          cookieValue를 반환합니다.
}
};
함수 SetFont(크기){
$.cookie('Font_size', size, { 만료: 99999999 });
$(".context").css("font-size",size);//.context는 기사 콘텐츠의 컨테이너로 대체됩니다
};
$(문서).ready(함수(){
SetFont( $.cookie('Font_size') 'px' );
});

코드의 .context를 기사 콘텐츠 컨테이너로 바꿉니다.

HTML 코드 부분:

그런 다음 필요한 경우 다음 코드를 호출하세요.

코드 복사 코드는 다음과 같습니다.

크다
중
작은

SetFont() 함수에서 글꼴 크기와 텍스트를 맞춤 설정할 수 있습니다.

이 글이 모든 분들의 JavaScript 기반 웹 프로그래밍에 도움이 되기를 바랍니다.