JavaScript에서 HTML 요소에 대한 CSS 속성 값 얻기

웹 개발에서 CSS 속성을 동적으로 조작하면 사용자 경험과 인터페이스를 향상시킬 수 있습니다. JavaScript를 사용하면 이러한 속성에 액세스하는 것이 간단합니다.

귀하의 시나리오에서는 CSS 파일이 HTML 페이지에 연결되어 있으며 클래스 이름이 ''인 div에 대한 특정 속성(예: 색상)을 검색해야 합니다. 공들여 나열한 것." JavaScript를 사용하여 이를 달성하는 방법은 다음과 같습니다.

옵션 1: 문서 스타일 시트 구문 분석(권장하지 않음)

설명:
이 방법에는 문서를 수동으로 반복하는 작업이 포함됩니다. .styleSheets 객체를 생성하고 해당 내용을 구문 분석하여 원하는 속성을 검색합니다. 그러나 이 접근 방식은 특히 복잡한 CSS 파일의 경우 또는 여러 요소의 속성을 검색해야 하는 경우 다루기 힘들 수 있으므로 권장되지 않습니다.

옵션 2: 요소 에뮬레이션 및 계산된 스타일 사용(선호)

설명:
이 방법은 더 효율적이며 정확한 결과를 제공합니다. 여기에는 대상 요소와 동일한 클래스 이름을 가진 요소를 생성한 다음 생성된 요소의 계산된 스타일에 액세스하는 작업이 포함됩니다. 계산된 스타일은 상속된 스타일과 사용자 스타일시트 또는 JavaScript를 통해 이루어진 모든 수정 사항을 포함하여 요소에 적용된 실제 스타일을 나타냅니다.

JavaScript 코드:

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

비인라인 스타일 고려 사항

인라인 스타일 정의 없이 상속된 스타일 속성을 검색하려는 경우 인라인 스타일을 일시적으로 제거한 다음 상속된 값을 검색할 수 있습니다.

JavaScript 코드:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}