인라인 스타일이 마스터 스타일시트 설정을 재정의할 때 JavaScript로 계산된 스타일에 액세스하는 방법은 무엇입니까?

JavaScript를 사용하여 마스터 스타일시트에서 스타일에 액세스

마스터 스타일시트에서 div의 표시 속성을 "없음"으로 설정하고 myDiv.style.display를 사용하여 JavaScript를 통해 액세스하면 빈 반환 값이 나타날 수 있습니다. 이는 인라인 스타일과 계산된 스타일 사이에 차이가 있기 때문입니다.

인라인 스타일은 HTML 요소 자체에 직접 설정되는 반면, 계산된 스타일은 HTML 요소에 설정된 스타일을 포함하여 요소에 적용되는 모든 스타일의 조합입니다. 외부 스타일시트 또는 상위 요소. 인라인 스타일이 있으면 충돌하는 모든 계산 스타일을 재정의합니다.

JavaScript를 통해 요소의 스타일 속성에 액세스하면 인라인 스타일만 읽을 수 있습니다. 따라서 마스터 스타일시트에서 표시 속성을 "none"으로 설정했지만 이를 재정의하는 인라인 스타일이 있는 경우 myDiv.style.display는 빈 문자열을 반환합니다.

계산된 스타일에 액세스하려면 다음이 필요합니다. getCompulatedStyle() 함수를 사용합니다. 이 함수는 외부 스타일시트 또는 상위 요소에 설정된 스타일을 포함하여 요소에 대해 계산된 모든 스타일을 포함하는 객체를 반환합니다.

다음은 getComputeStyle()을 사용하여 계산된 표시 속성을 검색하는 방법에 대한 예입니다.

var display = getComputedStyle(myDiv).display;

getComputeStyle()을 사용하면 인라인 스타일로 재정의된 요소의 계산된 스타일에 액세스할 수 있습니다.

위 내용은 인라인 스타일이 마스터 스타일시트 설정을 재정의할 때 JavaScript로 계산된 스타일에 액세스하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!