>웹 프론트엔드 >CSS 튜토리얼 >`this.style[property]`가 상속된 스타일에 대해 빈 문자열을 반환하는 이유는 무엇입니까?

`this.style[property]`가 상속된 스타일에 대해 빈 문자열을 반환하는 이유는 무엇입니까?

DDD
DDD원래의
2024-12-04 10:37:12218검색

Why Does `this.style[property]` Return an Empty String for Inherited Styles?

this.style[property]의 빈 문자열 반환 이해

HTML 요소의 스타일 속성에 액세스할 때 this.style[property] 구문을 사용하면, 요소 자체에 직접 적용된 스타일만 반환한다는 점에 유의하는 것이 중요합니다. 외부 스타일시트에서 상속되거나 계단식 규칙에서 계산된 스타일은 포함되지 않습니다.

제공된 코드 조각에서:

function css(prop, value) {
  if (value == null) {
    // retrieve style
    return this.style[prop]; // returns an empty string
  }
  // set style
}

element.css("height")를 호출하면 빈 문자열이 반환됩니다. 높이 스타일은 외부 스타일시트에 정의되어 있습니다. 요소에 적용된 인라인 스타일(배경: #CCC)은 여기서 관련이 없습니다.

계산된 스타일 정보를 검색하는 방법

상속되거나 계산된 스타일을 포함하여 스타일의 유효 값을 검색하려면 , getCompulatedStyle() 함수를 사용하세요:

const style = getComputedStyle(element);
console.log(style.height); // returns "100px"

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.