> 웹 프론트엔드 > CSS 튜토리얼 > JavaScript에서 `this.style[property]`가 빈 문자열을 반환하는 이유는 무엇입니까?

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

Mary-Kate Olsen
풀어 주다: 2024-12-07 00:17:14
원래의
340명이 탐색했습니다.

Why Does `this.style[property]` Return an Empty String in JavaScript?

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>
로그인 후 복사

인라인 높이 속성이 정의되어 있지 않습니다. 따라서 this.style["height"]는 빈 문자열을 반환합니다.

외부 또는 인라인 스타일시트의 계단식 스타일을 포함하는 계산된 높이를 검색하려면 getCompulatedStyle() 메서드를 사용할 수 있습니다.

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"를 반환합니다.

위 내용은 JavaScript에서 `this.style[property]`가 빈 문자열을 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿