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

JavaScript는 웹 페이지에서 다양한 대화형 효과와 기능을 구현하는 데 사용할 수 있는 널리 사용되는 프로그래밍 언어입니다. 그 중에서 글꼴 크기를 조정하는 것은 웹 페이지에서 일반적인 작업입니다. 이 기사에서는 JavaScript가 웹 페이지의 텍스트 크기를 조정하는 방법을 소개합니다.

1. DOM 작업을 사용하여 글꼴 크기 조정

DOM(Document Object Model)은 JavaScript의 중요한 부분이며 웹 페이지의 콘텐츠를 조작하는 데 사용됩니다. DOM을 통해 글꼴 크기를 수정해야 하는 요소를 쉽게 찾은 다음 .style.fontSize 속성을 사용하여 크기를 조정할 수 있습니다.

먼저 크기를 조정해야 하는 요소를 찾아야 합니다. 수정해야 하는 요소 개체는 id 또는 클래스로 얻을 수 있습니다. 예:

<p id="paragraph">这是一个段落</p>
<p class="text">这是另一个段落</p>

JavaScript의 getElementById 메서드와 getElementsByClassName 메서드를 통해 다음 두 요소 개체를 얻을 수 있습니다.

var p1 = document.getElementById("paragraph"); //获取id为paragraph的元素对象
var p2 = document.getElementsByClassName("text")[0]; //获取class为text的元素对象数组，取出第一个元素

다음으로 .style을 전달할 수 있습니다. .fontSize 속성을 사용하여 글꼴 크기를 수정하세요.

p1.style.fontSize = "20px"; //将id为paragraph的元素的字体大小设置为20px
p2.style.fontSize = "16px"; //将class为text的元素的字体大小设置为16px

이렇게 하면 글꼴 크기를 쉽게 조정할 수 있습니다.

2. jQuery 라이브러리를 사용하여 글꼴 크기 조정

jQuery는 다양한 작업 단계를 단순화하고 JavaScript 프로그래밍을 더 쉽고 간결하게 만드는 인기 있는 JavaScript 라이브러리입니다. jQuery 라이브러리를 사용하여 글꼴 크기를 조정하면 코드 양이 줄어들고 브라우저 간 호환됩니다.

jQuery 라이브러리를 사용하기 전에 웹 페이지에 jQuery 라이브러리를 도입해야 합니다.

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

그런 다음 jQuery의 선택기를 사용하여 아래와 같이 글꼴 크기를 수정해야 하는 요소를 가져올 수 있습니다.

$("#paragraph").css("font-size","20px"); //将id为paragraph的元素的字体大小设置为20px
$(".text").css("font-size","16px"); //将class为text的元素的字体大小设置为16px

jQuery 라이브러리를 사용하면 .css 메소드를 사용하여 글꼴 크기를 수정할 수 있을 뿐만 아니라 .animate 메소드를 사용하여 더욱 화려한 애니메이션 효과를 얻을 수도 있습니다. 예:

$("#paragraph").animate({fontSize: "20px"}, 1000); //用1000毫秒的时间将id为paragraph的元素的字体大小调整为20px
$(".text").animate({fontSize: "16px"}, 1000); //用1000毫秒的时间将class为text的元素的字体大小调整为16px

3. CSS를 사용하여 글꼴 크기 제어

JavaScript를 사용하여 글꼴 크기를 제어하는 ​​것 외에도 CSS 스타일을 사용하여 글꼴 크기를 조정할 수도 있습니다.