하위 요소에 대한 스타일 전파를 보장하기 위해 WebKit 다시 그리기를 강제로 수행하려면 어떻게 해야 합니까?

스타일 전파를 위해 WebKit 다시 그리기 강제

JavaScript 스타일 변경을 구현할 때 웹 개발자는 브라우저 간에 불일치가 발생할 수 있습니다. Chrome 및 Safari와 같은 WebKit 기반 브라우저에서는 요소의 클래스 이름에 대한 간단한 업데이트가 하위 요소로 전파되지 않을 수 있습니다.

이 문제는 형제를 업데이트할 때 발생하며 첫 번째 형제는 새 스타일을 받지만 두 번째 형제는 영향을 받지 않습니다. . 영향을 받은 요소 내에 포커스와 앵커 태그가 있으면 상황이 더욱 복잡해집니다.

해결 방법: 디스플레이 토글을 사용하여 다시 그리기 트리거

WebKit에서 이 문제를 해결하려면 간단하고 효과적인 해결 방법은 영향을 받은 요소의 표시 속성을 전환하는 것입니다.

sel.style.display = 'none';
sel.offsetHeight; // Accessing offsetHeight forces a reflow
sel.style.display = '';

이렇게 하면 작업을 다시 그리거나 다시 칠하여 스타일 변경 사항을 모든 하위 항목에 전파합니다. 이 기술은 블록 수준 요소에서 작동하는 것으로 확인되었으며 다른 디스플레이 유형에 대한 효율성은 추가 조사가 필요할 수 있다는 점은 주목할 가치가 있습니다.

위 내용은 하위 요소에 대한 스타일 전파를 보장하기 위해 WebKit 다시 그리기를 강제로 수행하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!