JavaScript를 사용하여 CSS 속성 변경

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript를 사용하여 CSS 속성 변경
Nithin Krishnan 2023년10월12일
JavaScript JavaScript CSS
  1. JavaScript에서getElementsByClassName을 사용하여 CSS 속성 변경
  2. JavaScript에서getElementById로 CSS 속성 변경
  3. JavaScript에서querySelector()를 사용하여 CSS 속성 변경
  4. 결론
JavaScript를 사용하여 CSS 속성 변경

HTML (HyperText Markup Language)은 정적이며 일반적으로 멍청합니다. 이는 동적 조건에 따라 코드 조각을 실행할 수있는 기능이 없다는 것을 의미합니다. 조건이 충족되는 경우if조건 블록이 특정 HTML 요소 또는 태그를 표시-숨기기위한 조항이 없습니다. 이러한 시나리오의 경우 HTML 요소의 CSS 스타일을 변경하기 위해 JavaScript 또는 jQuery에 의존해야 할 수 있습니다.

HTML 요소의 스타일을 변경하려면<div>라고 말하고<div>또는 특정 HTML 요소를 고유하게 선택해야합니다. 이제 문서 인터페이스의 다음 기능을 사용하여이를 수행 할 수 있습니다.

JavaScript에서getElementsByClassName을 사용하여 CSS 속성 변경

getElementsByClassName은 전체 HTML 문서를 검색하고이 함수의 매개 변수에 전달 된 클래스 이름을 가진 모든 HTML 요소의 배열을 반환합니다. 지정된 CSS 클래스 이름을 가진 하위 요소를 찾기 위해 요소에서 사용할 수도 있습니다. getElementByClassName의 구문은 다음과 같습니다.

document.getElementsByClassName('green-class'));

element.style을 사용하여 스타일 설정

요소를 고유하게 식별하면.style또는.className메소드를 사용하여 CSS 스타일을 변경할 수 있습니다. 다음 예를 참조하십시오.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>

function changeStyle() {
  document.getElementsByClassName('input-blue-border')[0].style.borderColor =
      'red';
}

changeStyle()메소드에서document.getElementsByClassName("input-blue-border")메소드를 사용하여 입력 요소를 쿼리합니다. 선택한 요소가있는 배열을 반환합니다. 배열의 첫 번째 요소를 선택하고.style.borderColor = "red"로 테두리 색상을 변경합니다.

element.className을 사용하여 스타일 설정

element.className을 사용하여 HTML 요소의 다양한 스타일 매개 변수를 클래스로 묶고element.className을 사용하여 선택한 요소에 클래스 이름을 할당함으로써 HTML 요소의 다양한 스타일 매개 변수를 변경할 수 있습니다. 이 방법은 특히 입력 필드에 오류를 표시해야하는 시나리오에서 유용합니다. 이 경우 입력 필드의 테두리 색상을 빨간색으로 변경하고 입력의 내부 텍스트를 빨간색으로 변경해야합니다. 따라서 이러한 스타일을 클래스로 묶고element.className속성을 사용하여 요소에 할당 할 수 있습니다. 다음 코드는 오류 처리를 보여줍니다.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>

function changeClass() {
  document.getElementsByClassName('input-blue-border')[0].className =
      'input-error';
}

input-error클래스에는 입력 필드의 테두리 색상과 글꼴 색상을 빨간색으로 설정하는 몇 가지 속성이 있습니다.

비고

  • getElementByClassName()메소드는 인수로 전달 된 클래스 이름 값을 규정하는 요소 배열을 리턴합니다.
  • getElementByClassName()은이 메소드에서 반환 된 배열을 반복하여 둘 이상의 요소에 스타일 변경을 적용하는 동안 사용할 수 있습니다.
  • 요소가 선택되면element.style. <스타일 속성>은 특정 스타일 속성을 선택한 요소로 설정합니다.
  • 마찬가지로,element.className은 스타일 속성을 CSS 클래스로 묶어 선택한 HTML 요소에 둘 이상의 스타일 변경을 설정하는 데 도움이됩니다.

JavaScript에서getElementById로 CSS 속성 변경

HTML 요소에 할당 된 고유 ID가있는 경우Document인터페이스의getElementById()함수를 사용하여이를 쿼리하고 스타일을 변경할 수 있습니다. 웹 개발자가 가장 널리 사용하는 방법입니다. 대부분 div에 할당 된 ID는 고유하게 유지되므로getElementById()함수를 실행하는 동안 다른 HTML 요소가 선택되지 않습니다. getElementById()의 구문은 다음과 같습니다.

document.getElementById("parent-1"));

고유 한 요소를 선택하면이 경우 스타일 변경이 쉽습니다. 다음 코드는 방법을 설명합니다. 이전에 언급 한 것과 유사하지만 요소를 쿼리하는 방법이 다릅니다. 여기서는 요소 ID로 HTML 노드를 고유하게 식별합니다.

document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';

비고

  • getElementByClassName()과 달리getElementById()메소드는 쿼리에서 선택한 노드 요소 인 하나의 객체 만 반환합니다.
  • 의도 한 HTML에getElementById()메소드가 작동하려면 id 속성이 있어야합니다.
  • 둘 이상의 HTML 노드에 동일한 ID가있는 경우getElementById()메서드는 지정된 ID를 가진 첫 번째 요소를 반환합니다.
  • getElementByClassName()과 달리getElementById()함수가 반환하는 객체에 배열 대신 객체를 반환하므로 스타일 변경 사항을 직접 적용 할 수 있습니다.

JavaScript에서querySelector()를 사용하여 CSS 속성 변경

querySelector()메서드는 요소 선택 메커니즘에서 제공하는 기능의 상위 집합입니다. 그것은getElementsByClassName()과getElementById()메소드의 결합 된 힘을 가지고 있습니다. 이 방법을 사용하면 CSS 클래스를 작성하는 동안 동일한 방식으로 HTML 요소를 선택할 수 있습니다. ID, 클래스 및 HTML 태그로 요소를 선택하는 데 사용할 수 있습니다. 반환 유형 측면에서getElementById()메서드와 유사하게 작동합니다. querySelector()는 매개 변수에 언급 된 기준을 충족하는 첫 번째 HTML 노드 요소 만 반환합니다. querySelector()에 사용되는 구문은 다음과 같습니다.

document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');

따라서 여기에서도.style.borderColor또는.className을 추가하여 선택한 HTML 요소에 스타일을 적용 할 수 있습니다. 동일한 HTML 구조를 사용하고onclick메소드를changeStyle()으로 변경하면 JavaScript에서 아래 설명 된대로 코드를 추가하여 새 스타일을 동적으로 가져올 수 있습니다.

<button class="ml-3" onclick="changeStyle()">Change Border</button>

function changeStyle() {
  document.querySelector('.input-blue-border').style.borderColor = 'red';
}

마찬가지로, 스타일 변경 대신 입력의 CSS 클래스를 변경하려면 위의 예에서.style.borderColor대신.className()속성을 사용해야합니다.

<button class="ml-3" onclick="changeClass()">Change Border</button>

function changeClass() {
  document.querySelector('.input-blue-border').className = 'input-error';
}

비고

  • document.querySelector()함수의 리턴 유형을 주시 할 가치가 있습니다. 쿼리를 만족하는 모든 HTML 개체를 반환하는 대신 쿼리 조건에 맞는 첫 번째 요소를 반환합니다.
  • querySelector()사용의 장점은 다양한 상황에서 사용할 수 있다는 것입니다. HTML 요소의 ID를 기반으로 쿼리하거나 CSS 클래스 또는 HTML 태그 이름을 사용하여 쿼리 할 수도 있습니다.
  • 쿼리 조건을 충족하는 둘 이상의 div 스타일을 동적으로 변경하는 것은 쿼리 용어를 전달하는 HTML 요소 배열 대신 객체를 반환하므로querySelector()를 사용하여 불가능할 수 있습니다.

결론

런타임에 HTML 요소의 스타일을 변경하기 위해 선택한 HTML 요소의.style또는.className속성을 사용할 수 있습니다. 대상 HTML 노드를 선택하는 동안 문제가 발생합니다. HTML 노드를 고유하게 선택하는 방법에는 여러 가지가 있습니다. HTML 노드를 쿼리하기 위해 CSS 클래스의 이름을 사용하는getElementsByClassName()메소드를 사용할 수 있습니다. 또는 요소에 ID를 할당하고.getElementById()로 쿼리하거나 전달 된 매개 변수를 기반으로 쿼리를 이해하는 모든 상황에 맞는 다목적querySelector()메서드를 사용하여 요소를 고유하게 선택합니다.