`element.style`이 CSS에 정의된 스타일에 대해 빈 값을 반환하는 이유는 무엇입니까?

JavaScript 스타일 속성 불일치

Q: 디스플레이가 정의될 ​​때 element.style이 지속적으로 빈 값을 반환하는 이유는 무엇입니까? CSS에서는 요소가 스타일을 상속하더라도?

A: element.style 속성은 HTML 문서의 요소에 직접 적용된 인라인 스타일을 검색합니다. CSS에 정의된 스타일은 인라인으로 간주되지 않으므로 element.style은 해당 스타일을 반영하지 않습니다.

계산된 스타일:

JavaScript는 window.getCompulatedStyle()을 제공합니다. 요소에 적용된 실제 효과적인 스타일을 얻는 기능입니다. 이 함수는 요소를 입력으로 사용하고 모든 CSS 속성에 대해 계산된 값을 포함하는 ComputedStyle 객체를 반환합니다.

예:

다음 코드를 고려하세요.

<div>

#test {
  display: block;
}

document.getElementById('test').style.display에 액세스하면 빈 문자열이 반환되고 window.getCompulatedStyle(document.getElementById('test')).display는 "block"을 올바르게 반환합니다.

결론:

요소에 적용된 CSS 스타일을 얻으려면 window.getCompulatedStyle()을 사용해야 합니다. element.style을 사용하면 일반적으로 외부 CSS가 있는 요소에 설정되지 않는 인라인 스타일만 검색됩니다.

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