버튼 클릭시 jQuery 변경 글꼴 스타일-프런트엔드 Q&A-php.cn

버튼 클릭시 jQuery 변경 글꼴 스타일

PHPz

풀어 주다： 2023-05-14 10:29:07

원래의

773명이 탐색했습니다.

프런트 엔드 디자인에서 글꼴 스타일은 페이지의 필수적인 부분입니다. 사용자가 버튼을 클릭할 때 글꼴 스타일을 변경하게 하려면 jQuery가 매우 편리한 방법입니다. 이 기사에서는 jQuery를 사용하여 버튼 클릭으로 글꼴 스타일을 변경하는 방법을 보여줍니다.

준비

시작하기 전에 다음 준비가 완료되었는지 확인해야 합니다.

jQuery 라이브러리 소개

HTML 문서에서 jQuery 라이브러리를 소개해야 합니다. CDN을 사용하거나 jQuery를 로컬로 다운로드한 다음 문서에 도입하도록 선택할 수 있습니다. 다음은 CDN 인용 예시입니다.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

로그인 후 복사

CSS 스타일 준비

CSS 파일에는 버튼을 클릭하면 글꼴 스타일이 변경되므로 몇 가지 스타일을 작성해야 합니다. 예는 다음과 같습니다.

.change {
  font-size: 20px;
  font-weight: bold;
  color: #00bfff;
}

로그인 후 복사

이 예에서는 ".change"라는 클래스를 정의합니다. 이 클래스를 요소에 추가하면 글꼴 크기, 두께 및 색상 변경 사항이 적용됩니다.

단계

클릭 이벤트 리스너 추가

먼저 버튼이 클릭되는 이벤트에 응답하기 위해 버튼에 클릭 이벤트 리스너를 추가해야 합니다. 예는 다음과 같습니다.

$("button").click(function() {
  // 在此处添加代码 
});

로그인 후 복사

이 예에서는 jQuery 선택기를 사용하여 모든 버튼을 선택하고 해당 버튼에 대한 클릭 이벤트 리스너를 추가했습니다. 버튼을 클릭하면 리스너 함수의 일부 코드가 실행됩니다.

요소 선택 및 스타일 변경

클릭 이벤트의 리스너 기능에서 요소를 선택하고 스타일을 변경하면 버튼을 클릭하여 글꼴 스타일을 변경하는 효과를 얻을 수 있습니다. 예는 다음과 같습니다.

$("button").click(function() {
  // 选择元素并改变样式
  $("p").toggleClass("change");
});

로그인 후 복사

이 예에서는 jQuery 선택기를 사용하여 모든 단락 요소를 선택하고 토글클래스 메서드를 사용하여 해당 클래스 이름을 전환합니다. 클래스 이름이 ".change"인 경우 모든 단락 요소에는 이전에 정의된 스타일 변경이 적용됩니다. 클래스 이름이 제거되면 단락 요소가 원래 스타일로 되돌아갑니다.

완전한 예

다음은 버튼을 클릭하여 글꼴 스타일을 변경하는 효과를 얻는 완전한 HTML, CSS 및 JavaScript 코드 예입니다.




  
  jQuery点击按钮改变字体样式
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("p").toggleClass("change");
      });
    });
  </script>



  
  这是一个段落元素。
  这是另一个段落元素。

로그인 후 복사

이 예에서는 페이지에 버튼 한 개와 단락 요소 두 개를 추가했습니다. 버튼을 클릭하면 단락 요소의 글꼴 크기, 두께, 색상이 변경됩니다.

위 내용은 버튼 클릭시 jQuery 변경 글꼴 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!