증가하고 자바 스크립트를 사용하여 HTML의 글꼴 크기를 재설정하는 방법?

다음 코드를 사용하여 HTML의 글꼴 크기를 재설정했습니다. 그러나 글꼴 크기를 늘릴 수 없습니다 .HTML 페이지 전체 본문 부분의 글꼴 크기를 늘리려는 것입니다. 다음 코드는 글꼴 크기를 늘리는 데 사용되었습니다. 그 페이지. HTML 페이지에서증가하고 자바 스크립트를 사용하여 HTML의 글꼴 크기를 재설정하는 방법?

<script type="text/javascript"> 
    $(document).ready(function(){ 
    // Reset Font Size 
    var originalFontSize = $('html').css('font-size'); 
    //console.log(originalFontSize); 

    $(".resetFont").click(function(){ 
     $('html').css('font-size', originalFontSize); 
    }); 

    // Increase Font Size 
    $(".increaseFont").click(function(){ 
     var currentFontSize = $('html').css('font-size'); 
     var currentFontSizeNum = parseFloat(currentFontSize, 10); 
     var newFontSize = currentFontSizeNum*1.2; 

     $('html').css('font-size', newFontSize); 
     return false; 
    }); 
    }); 

</script>

은 내가 ... 제발 도와주세요 모든 사전에

감사를

<a href="#" class="resetFont">RESET Font</a> 
<a href="#" class="increaseFont">INCREASE FONT</a>

을 다음 사용

출처

2012-07-16 Rabesh Lal Shrestha

코드는 Chrome과 IE에서 제대로 작동합니다. – Strelok

이것을 확인하십시오 http://jsfiddle.net/ZPdpV/2/. 귀하의 코드가 잘 작동합니다. – muthu

이것을 확인하십시오 http://jsfiddle.net/EwHvg/2/ – mfadel

-2

나는 이것이 당신의 CSS에 따라 생각합니다. body, divs 등의 HTML 요소 아래에 절대 글꼴 크기 (예 : px 값)를 갖는 요소를 정의한 경우이 방법은 작동하지 않습니다. 상대 크기 (예 : em)를 사용하면이 스크립트는 제대로 작동하는 것처럼 보입니다.

출처

2012-07-16 05:44:34

코드가 정상적으로 작동하지만 여전히 작동하지 않는 경우 http://jsfiddle.net/XZfKh/을 사용해보십시오.

var originalFontSize; 
$(document).ready(function(){ 
    // Reset Font Size 
    originalFontSize = $('html').css('font-size'); 
    //console.log(originalFontSize); 

    $(".resetFont").click(function(){ 
    $('html').css('font-size', originalFontSize); 
    }); 

    // Increase Font Size 
    $(".increaseFont").click(function(){ 
    var currentFontSize = $('html').css('font-size'); 
    var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum*1.2; 
    $('html').css('font-size', newFontSize); 
    return false; 
    }); 
});

나는 originalFontSize에 대한 신고를 맨 위로 옮겼습니다.

편집 : 일부 요소가 이미 지정된 font-size이있는 경우

,이 코드를 사용 : 페이지에있는 모든 요소를 통해

var newFontSize = 100; 
$(document).ready(function(){ 
    $(".resetFont").click(function(){ 
    newFontSize = 100; 
    var allElems = $('*'); 
    for(var counter = 0; counter < allElems.length; counter++) { 
     $(allElems[counter]).css('font-size', '100%'); 
    } 
    }); 

    // Increase Font Size 
    $(".increaseFont").click(function(){ 
    newFontSize = newFontSize*1.2; 
    var allElems = $('*'); 
    for(var counter = 0; counter < allElems.length; counter++) { 
     $(allElems[counter]).css('font-size', newFontSize + '%'); 
    } 
    return false; 
    }); 
});

그것은주기를, 그리고 각각에 대한 font-size을 증가 그들.

Example

출처

2012-07-16 06:15:17

다음 시나리오에서는 작동하지 않습니다. http://jsfiddle.net/XZfKh/1/ – Bharath

@Bharath - 나는이 문제를 해결하기 위해 몇 가지 코드를 만들었습니다. 업데이트 된 게시물을 참조하십시오. –

는 만 <html>에 글꼴 크기를 설정합니다. 나는 글꼴 크기 증가가 필요한 실제 텍스트가 pixel에 글꼴 크기 정의가있는 인라인 스타일 또는 CSS 클래스에 적용된다는 점을 짐작합니다. 그래서 크기가 커지지 않습니다. font-size를 텍스트의 실제 html 요소로 설정하거나 문서의 모든 요소가 "<html>" 인 경우 em에서 font-size를 설정하십시오.

그런 다음 자바 스크립트를 사용하여 효과를 높일 수 있습니다.

출처

2012-07-16 07:00:55 Bharath

Firefox 용 Firebug를 사용하면''의 스타일이'px'로 지정됩니다. 내 답변의 예제 링크를 참조하십시오. –

내 홈페이지 http://jsfiddle.net/XZfKh/1/를 참조하십시오. – Bharath

증가하고 자바 스크립트를 사용하여 HTML의 글꼴 크기를 재설정하는 방법?

답변

관련 문제