JavaScript 이벤트 리스너를 사용하여 CSS 스타일을 동적으로 수정하는 방법은 무엇입니까?

JavaScript를 사용하여 CSS 스타일을 동적으로 수정하는 방법

JavaScript를 사용하여 요소의 CSS 속성을 동적으로 변경하려면 여러 가지 방법을 사용할 수 있습니다. 가장 다양한 접근 방식 중 하나는 요소의 스타일 속성을 사용하는 것입니다. 이 속성은 요소에 정의된 모든 인라인 스타일에 대한 액세스를 제공합니다.

다음 HTML 및 CSS 스니펫을 고려하세요.

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">

.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px;
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px;
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
}

이 스니펫에는 세 가지 요소(왼쪽, 가운데, 오른쪽), 각각 다른 클래스가 있습니다. 왼쪽 또는 오른쪽 요소 위에 마우스를 올리면 테두리 색상이 파란색으로 변경됩니다.

왼쪽에 마우스를 올리면 left1 요소가 나타나고 오른쪽에 마우스를 올리면 right1 요소가 나타나도록 하려면 JavaScript를 사용할 수 있습니다.

document.querySelector('.left').addEventListener('mouseenter', () => {
  document.querySelector('.left1').style.display = 'block';
});

document.querySelector('.left').addEventListener('mouseleave', () => {
  document.querySelector('.left1').style.display = 'none';
});

document.querySelector('.right').addEventListener('mouseenter', () => {
  document.querySelector('.right1').style.display = 'block';
});

document.querySelector('.right').addEventListener('mouseleave', () => {
  document.querySelector('.right1').style.display = 'none';
});

이 JavaScript 코드에서는 addEventListener 메서드를 사용하여 mouseenter 및 mouseleave 이벤트의 왼쪽 및 오른쪽 요소에 이벤트 리스너를 연결합니다. 마우스가 요소에 들어가면 해당 숨겨진 요소의 표시 스타일을 블록으로 변경하여 표시됩니다. 마우스가 요소를 벗어나면 숨겨진 요소가 다시 숨겨집니다.

스타일 속성을 사용하여 CSS 속성을 동적으로 변경하면 웹 페이지에서 요소의 모양을 수정하는 데 큰 유연성이 제공됩니다.

위 내용은 JavaScript 이벤트 리스너를 사용하여 CSS 스타일을 동적으로 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!