jQuery 크기 조정 텍스트 동적으로

jQuery 및 HTML 코드 스 니펫을 사용하여 사용자가 "텍스트 증가"또는 "텍스트 감소"버튼을 클릭하면 웹 페이지의 텍스트 크기를 동적으로 조정하십시오.

jQuery 코드 :

HTML 코드 :

온라인 시연보기

$(document).ready(function(){
    const targetSections = ['span', '.section2']; // 目标元素选择器数组
    const selector = targetSections.join(','); // 将选择器数组连接成字符串

    // 获取初始字体大小
    const originalFontSize = $(selector).css('font-size');

    // 重置字体大小
    $(".resetFont").click(function(){
        $(selector).css('font-size', originalFontSize);
    });

    // 增大字体大小
    $(".increaseFont").click(function(){
        let currentFontSize = parseFloat($(selector).css('font-size'), 10);
        let newFontSize = currentFontSize * 1.2;
        $(selector).css('font-size', newFontSize + 'px'); // 添加单位px
        return false;
    });

    // 减小字体大小
    $(".decreaseFont").click(function(){
        let currentFontSize = parseFloat($(selector).css('font-size'), 10);
        let newFontSize = currentFontSize * 0.8;
        $(selector).css('font-size', newFontSize + 'px'); // 添加单位px
        return false;
    });
});

jQuery와 동적으로 크기를 조정하는 FAQ : 다음은 jQuery를 사용하여 텍스트를 동적으로 크기를 조정하는 것에 대한 자주 묻는 질문에 대한 답변입니다.

jQuery를 사용하여 글꼴 크기를 동적으로 변경하는 방법은 무엇입니까?

사용

<button class="increaseFont">+</button>
<button class="decreaseFont">-</button>
<button class="resetFont">=</button>

<p>此段落字体大小可调。</p>
<div class="section2">此部分字体大小也可调！</div>
<p>此段落不受影响。</p>

메소드를 사용하십시오. 예를 들어 :

이것은 모든 단락 요소의 글꼴 크기를 20px로 설정합니다.

jQuery를 사용하여 글꼴 크기를 늘리거나 줄이는 방법은 무엇입니까? 현재 글꼴 크기를 얻은 다음 값을 추가하거나 빼십시오. 예를 들어 : 이것은 모든 단락 요소의 글꼴 크기를 2px로 증가시킵니다.

창 크기가 크기가 크기로 창 크기로 글꼴 크기를 변경하는 방법은 무엇입니까?

사용
• 메소드를 사용하십시오. 예를 들어 :

  이것은 창 너비에 따라 모든 단락 요소의 글꼴 크기를 조정합니다. .css() $("p").css("font-size", "20px"); jQuery를 사용하여 글꼴 크기의 변화를 애니메이션 할 수 있습니까? 당신은

  메소드를 사용할 수 있습니다. 예를 들어 :
이것은 모든 단락 요소의 글꼴 크기를 1.5 초 만에 20px로 점차 변경합니다.

• 특정 요소의 글꼴 크기 만 변경하는 방법은 무엇입니까? 특정 선택기를 사용하십시오. 예를 들어 : let size = parseInt($("p").css("font-size")); size = 2; $("p").css("font-size", size "px"); 이것은 클래스 "myclass"가있는 모든 단락 요소의 글꼴 크기를 20px로 설정합니다.

• jQuery를 사용하여 글꼴 크기를 원래 값으로 재설정하는 방법은 무엇입니까? 글꼴 크기를 (빈 문자열)로 설정하십시오. 예를 들면 : .resize() $(window).resize(function() { let size = $(window).width() / 30; $("p").css("font-size", size "px"); });

  사용자 입력을 기준으로 글꼴 크기를 변경하는 방법은 무엇입니까?
메소드를 사용하여 사용자 입력을 얻은 다음
• 메소드를 사용하여 글꼴 크기를 설정하십시오.

  .animate() 요소를 클릭 할 때 jQuery를 사용하여 글꼴 크기를 변경하는 방법은 무엇입니까? $("p").animate({ fontSize: "20px" }, 1500); 사용

  메소드를 사용하십시오.

• 마우스가 요소 위로 떠 올릴 때 jQuery를 사용하여 글꼴 크기를 변경하는 방법은 무엇입니까? 사용 메소드를 사용하십시오. $("p.myClass").css("font-size", "20px");

• jQuery를 사용하여 특정 유형의 모든 요소의 글꼴 크기를 변경하는 방법은 무엇입니까? 유형 선택기를 사용하십시오. 예를 들어 :

  이것은 모든 단락 요소의 글꼴 크기를 변경합니다.

코드가 개선되어 잠재적 오류를 피하기 위해 글꼴 크기 유닛의 처리가 추가되었습니다. 또한 코드는 명확하고 FAQ에 대해 자세히 설명합니다.

위 내용은 jQuery 크기 조정 텍스트 동적으로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!