> 웹 프론트엔드 > JS 튜토리얼 > jquery에서 글꼴 크기와 줄 높이를 조정하는 방법은 무엇입니까?

jquery에서 글꼴 크기와 줄 높이를 조정하는 방법은 무엇입니까?

伊谢尔伦
풀어 주다: 2017-06-17 09:23:11
원래의
4512명이 탐색했습니다.

font-size 속성은 모든 사람에게 친숙할 것입니다. 이 속성은 글꼴 크기를 제어합니다. 관심 있는 친구들은 jquery를 사용하여 글꼴 크기 속성 값을 얻는 방법을 소개합니다.

페이지의 원래 크기를 늘리고 줄이고 복원합니다. html 페이지에는 세 가지 요소가 정의되어야 합니다. 요소의 클래스는 JQuery이벤트에 정의되어 있습니다. 이 파일의 요소의 클릭 이벤트는 원본 크기를 늘리고 줄이고 복원하는 데 사용됩니다.

샘플 코드는 다음과 같습니다.

$(function () { 
//取得字体大小,在html标记下定义了font-size 
var originalFontSize = $("html").css("font-size"); 
//恢复默认字体大小 
$(".resetFont").click(function () { 
$("html").css("font-size", originalFontSize); 
//JavaScript不向下执行 
return false; 
}); 
//加大字体,某个元素的class定义为increaseFont 
$(".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; 
}); 
//减小字体,某个元素的class定义为decreaseFont 
$(".decreaseFont").click(function () { 
//取得当前字体大小 后缀px,pt,pc 
var currentFontSize = $("html").css("font-size"); 
//取得当前字体大小,parseFloat()转为float类型去除后缀 
var currentFontSizeNumber = parseFloat(currentFontSize); 
//重新定义字体大小 
var newFontSize = currentFontSizeNumber * 0.9; 
//重写样式表 
$("html").css("font-size", newFontSize); 
//JavaScript不向下执行 
return false; 
}); 
});
로그인 후 복사

글꼴 크기(font-size) 및 줄 높이(line-height) 설정을 위한 Jquery 구현  

var cssfontSize=$(".txt_container").css('font-size'); // 获取字体大小
var csslineHeight=$(".txt_container").css('line-height');//获取行高 ,如果没有设置会得到normal.. 
var unit=cssfontSize.slice(-2);     //这里获取的是带上单位的字体大小 比如"16px" 所以要使用slice(-2)从倒数2位开始,从而得到16.
var fontSize=parseFloat(cssfontSize);  //得到字符串内数值部分
var lineHeight=parseFloat(csslineHeight); //同上
if(c=="fontA_plus"){                   
    if(fontSize>32)
         return false;
         fontSize=fontSize+2;
         lineHeight=lineHeight+2;
}
    if(c=="fontA_minus")
    {
        if(fontSize<18) return false;
        fontSize=fontSize-2;
        lineHeight=lineHeight-2;
    }
$(".txt_container").css(&#39;font-size&#39;,fontSize+unit);  //JQ css方法存在第二个参数则为设置
$(".txt_container").css(&#39;line-height&#39;,lineHeight+unit);
로그인 후 복사

                                                                  

위 내용은 jquery에서 글꼴 크기와 줄 높이를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿