js에서 CSS 속성을 변경하는 방법

JS(JavaScript)는 대화형 웹 페이지와 동적 웹 사이트를 디자인하는 데 사용되는 프로그래밍 언어입니다. JS는 DOM(Document Object Model)을 통해 HTML 페이지의 요소에 액세스하고 조작할 수 있습니다. 이 글에서는 주로 JS를 사용하여 CSS 속성을 변경하는 방법을 소개합니다.

1. 요소 가져오기
CSS 속성을 변경하기 전에 작업할 요소를 가져와야 합니다. document.getElementById() 메서드를 사용하여 요소 ID로 요소를 가져오거나 document.querySelector() 메서드를 사용하여 CSS 선택기로 요소를 가져올 수 있습니다.

다음 예와 같습니다.
HTML 코드:

<div id="myDiv">Hello World!</div>

JS 코드:

var myDiv = document.getElementById("myDiv");

또는

var myDiv = document.querySelector("#myDiv");

두 코드 줄 모두 "Hello World!" 텍스트가 포함된 div 요소를 가져옵니다.

2. CSS 속성 변경
CSS 속성을 변경하는 방법에는 두 가지가 있습니다. style 속성을 통해 직접 스타일을 변경하거나, class 속성을 통해 스타일을 변경하는 것입니다.

1. 스타일 직접 변경
   요소의 스타일 속성을 사용하여 CSS 스타일을 변경할 수 있습니다. 다음 예에서는 배경색을 빨간색으로 변경합니다.

   myDiv.style.backgroundColor = "red";

   여러 스타일을 동시에 변경할 수도 있습니다.

   myDiv.style.backgroundColor = "red";
   myDiv.style.color = "white";

2. 클래스 속성 변경
   속성은 CSS 파일에서 여러 스타일을 미리 정의한 다음 요소의 클래스 속성을 통해 JS에서 스타일을 변경할 수 있습니다. 배경색을 파란색으로 변경하려면 다음 예를 따르세요.
   CSS 코드:

   .blue-background {
     background-color: blue;
   }

   JS 코드:

   myDiv.className = "blue-background";

   이렇게 하면 div 요소의 배경색이 파란색으로 변경됩니다.

3. 이벤트에 따른 스타일 변경
JS는 사용자가 특정 작업을 수행한 후에 스타일 변경을 실행할 수도 있습니다. 다음 예에서는 요소 위에 마우스를 올리면 텍스트 색상이 녹색으로 변경됩니다.
HTML 코드:

<div id="myDiv">Hello World!</div>

JS 코드:

var myDiv = document.getElementById("myDiv");

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};

마우스를 요소 위에 올리면 텍스트 색상이 녹색으로 변경됩니다. 녹색으로 변경됩니다. 마우스를 멀리 이동하면 텍스트 색상이 검은색으로 돌아갑니다.

요약:
JS를 사용하면 HTML 요소의 스타일을 쉽게 수정하여 웹사이트를 더욱 역동적이고 흥미롭게 만들 수 있습니다. 위의 방법을 사용하면 JS를 활용하여 웹사이트 디자인의 스타일을 유연하게 변경하여 페이지를 더욱 다양하게 만들 수 있습니다.

위 내용은 js에서 CSS 속성을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!