JavaScript에서 `this.style[property]`가 빈 문자열을 반환하는 이유는 무엇입니까?

JavaScript this.style[property] 빈 문자열 반환: 설명

this.style[property]는 주로 적용된 인라인 스타일을 검색하는 반면 요소에 직접 연결하면 빈 문자열을 얻는 경우가 있습니다. 이는 문제의 속성이 요소의 인라인 스타일에 명시적으로 설정되지 않은 경우에 발생합니다.

제공된 코드 조각에서:

function css(prop, value) {
  if (value == null) {
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

element.css("height")를 호출할 때 인라인 높이 속성에 액세스하려고 합니다. 그러나 제공된 HTML에는

<div>
<p>인라인 높이 속성이 정의되어 있지 않습니다. 따라서 this.style["height"]는 빈 문자열을 반환합니다.</p>
<p>외부 또는 인라인 스타일시트의 계단식 스타일을 포함하는 계산된 높이를 검색하려면 getCompulatedStyle() 메서드를 사용할 수 있습니다.</p>
<pre class="brush:php;toolbar:false">const element = document.getElementById("test");
const style = getComputedStyle(element);
const height = style.height;

이 경우 높이는 "100px"입니다.

초기 코드의 문제를 해결하려면 다음을 수행하세요. CSS 함수를 다음과 같이 수정하세요.

function css(prop, value) {
  if (value == null) {
    const b = (window.navigator.userAgent).toLowerCase();
    let s;
    if (/msie|opera/.test(b)) {
      s = this.currentStyle;
    } else if (/gecko/.test(b)) {
      s = document.defaultView.getComputedStyle(this, null);
    }
    if (s[prop] != undefined) {
      return s[prop];
    }
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

이러한 수정으로 element.css("height")는 이제 계산된 스타일도 확인하므로 "100px"를 반환합니다.