>  기사  >  웹 프론트엔드  >  자바스크립트에서 글꼴 크기를 설정하는 방법

자바스크립트에서 글꼴 크기를 설정하는 방법

coldplay.xixi
coldplay.xixi원래의
2021-04-08 15:49:548746검색

JavaScript에서 글꼴 크기를 설정하는 방법: 먼저 레이아웃을 설정하고 두 개의 버튼을 작성한 다음 더하기 및 빼기 버튼을 클릭하여 텍스트 크기를 제어합니다. 코드는 [oPtxt.style.fontSize=num+'px']입니다.

자바스크립트에서 글꼴 크기를 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

JavaScript에서 글꼴 크기 설정 방법:

우선 레이아웃을 보고 간단한 문장을 작성하고 버튼 2개를 작성합니다.

<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>
<p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>

효과 그림은 다음과 같습니다.

자바스크립트에서 글꼴 크기를 설정하는 방법

그럼 , 텍스트 크기를 제어하려면 추가 또는 빼기 버튼을 클릭해야 합니다. js 코드는 다음과 같습니다.

<script>
    window.onload= function(){
        var oPtxt=document.getElementById("p1");
        var oBtn1=document.getElementById("Btn1");
        var oBtn2=document.getElementById("Btn2");
        var num = 14; /*定义一个初始变量*/
        oBtn1.onclick = function(){
            num++;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        };
        oBtn2.onclick = function(){
            num--;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        }
    }
</script>

관련 무료 학습 권장 사항: javascript 비디오 튜토리얼

위 내용은 자바스크립트에서 글꼴 크기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.