JavaScript를 사용하여 CSS 스타일을 변경하는 방법 살펴보기-프런트엔드 Q&A-php.cn

CSS(Cascading Style Sheets)는 웹 디자인에서 자주 사용하는 기술로 웹 페이지의 모양과 레이아웃을 변경하고 웹 페이지를 더 아름답고 읽기 쉽게 만들 수 있습니다. 이번 글에서는 JavaScript를 사용하여 CSS 스타일을 변경하는 방법을 살펴보겠습니다.

먼저 HTML로 스타일 시트를 정의하세요. 다음은 간단한 예입니다.

<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>

<div id="box">Hello World!</div>
<button id="redBtn">变成红色</button>
<button id="blueBtn">变成蓝色</button>

로그인 후 복사

이 예에서는 두 개의 CSS 스타일 클래스 "red"와 "blue"를 정의하고 텍스트 색상을 각각 빨간색과 파란색으로 설정합니다.

그런 다음 JavaScript에서는 document.querySelector() 메서드를 사용하여 DOM 요소와 .style 속성을 가져와 CSS 스타일을 변경할 수 있습니다. 예는 다음과 같습니다.

const box = document.querySelector('#box');
const redBtn = document.querySelector('#redBtn');
const blueBtn = document.querySelector('#blueBtn');

redBtn.onclick = () => {
  box.style.color = 'red';
};

blueBtn.onclick = () => {
  box.style.color = 'blue';
};

로그인 후 복사

이 예에서는 HTML의

요소에 해당하는 세 개의 변수를 만들었습니다. 그런 다음 .onclick 이벤트를 사용하여 버튼을 클릭할 때

요소의 색상을 변경하는 함수를 각 버튼에 바인딩합니다.

이 예에서는 .style 속성을 사용하여 CSS 스타일을 변경했습니다. 이 속성은 색상, 배경색, 글꼴, 크기 등과 같은 요소의 CSS 속성을 설정할 수 있습니다. .classList 속성을 사용하여 요소의 CSS 클래스를 추가하거나 제거할 수도 있습니다. 예:

box.classList.add('red');
box.classList.remove('blue');

로그인 후 복사

이 예에서는 요소의 CSS 클래스를 "blue"에서 "red"로 변경합니다.

간단히 말해서 JavaScript를 사용하면 웹 페이지의 모양과 레이아웃을 동적으로 변경하여 웹 페이지를 더욱 풍부하고 흥미롭게 만들 수 있습니다. CSS 스타일 변경, 요소 추가 또는 제거, 대화형 애니메이션 효과 등 모든 작업을 JavaScript로 수행할 수 있습니다. 웹 디자이너이거나 웹 디자인을 배우고 싶다면 JavaScript는 필수 기술 중 하나입니다.

위 내용은 JavaScript를 사용하여 CSS 스타일을 변경하는 방법 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：JavaScript를 사용하여 ArrayList를 구현하는 방법에 대해 토론 다음 기사：HTML에서 글꼴 스타일을 설정하는 방법

본 웹사이트의 성명

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

저자별 최신 기사