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

JavaScript에서 스타일 속성 가져오기

JavaScript에서 CSS 스타일을 처리할 때 this.style[property]가 다음을 반환할 수 있는 상황이 있습니다. 빈 문자열.

이해 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(property, value)를 사용하는 요소의 CSS 속성.

그러나 다음 예에서 height와 같이 인라인으로 설정되지 않은 속성을 검색하려고 합니다.

<div>
<pre class="brush:php;toolbar:false">const element = document.getElementById('test');
const height = element.css('height'); // Returns ""

이 경우 height는 인라인으로 정의되지 않았기 때문에 빈 문자열을 반환합니다. style.

해결책

외부 스타일시트에 정의된 CSS 속성에 액세스하거나 클래스를 사용하면 getCompulatedStyle() 함수를 사용할 수 있습니다. 이 함수는 적용된 모든 스타일을 포함하는 요소의 계산된 스타일을 검색합니다.

const element = document.getElementById('test');
const height = getComputedStyle(element).height; // Returns "100px"

제공한 업데이트 코드에서 계산된 스타일을 검색하기 위해 getComputeStyle()을 사용하여 CSS 함수를 수정했습니다. 요소:

function css(prop, value) {
  // Code to get or set CSS properties
  if (value == null) {
    var b = (window.navigator.userAgent).toLowerCase();
    var 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];
  }
  // Code to continue with your logic
}

이 업데이트된 기능을 사용하면 이제 외부 스타일시트에 정의되거나 클래스를 사용하여 정의된 CSS 속성을 올바르게 검색할 수 있습니다. 인라인 스타일로 설정되지 않은 경우