JavaScript를 통해 변경된 스타일을 전파하기 위해 WebKit 브라우저에 '넛지'가 필요한 이유는 무엇입니까?

WebKit Redraw 수수께끼 같은 동작: 스타일 변경 해결

웹 개발 영역에서는 여러 브라우저에서 일관된 모양을 보장하는 것이 어려울 수 있습니다. WebKit 기반 브라우저(예: Chrome, Safari)에서 JavaScript를 사용하여 스타일 변경을 적용하려고 할 때 이러한 문제 중 하나가 발생합니다.

다음 JavaScript 코드를 고려하세요.

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

이 코드의 목표는 다음과 같습니다. ID가 "my_id"인 요소의 클래스 속성을 수정합니다. 그러나 WebKit 브라우저에서는 영향을 받은 첫 번째 하위 형제 요소만 업데이트되고, 두 번째 요소는 수정된 요소의 직계 형제 요소임에도 변경되지 않고 그대로 유지됩니다.

흥미롭게도 Chrome의 '개발자 도구'에서는 간단히 모든 요소의 속성은 두 번째 형제의 올바른 렌더링을 트리거합니다. 이는 WebKit이 스타일 변경을 전파하기 위해 "넛지"가 필요하다는 것을 의미합니다.

사소하지만 효과적인 솔루션

다양한 비효율적인 권장 사항을 탐색한 후 간단하고 우아한 솔루션이 Vasil Dinkov의 의견. WebKit에서 다시 그리기를 강제하려면 다음을 실행하세요.

sel.style.display='none';
sel.offsetHeight; // Reference is sufficient, no need to store the value
sel.style.display='';

이 기술은 요소("sel")를 숨기고 해당 offsetHeight(숨겨지지 않은 요소의 경우 0이 아닌 속성)를 읽은 다음 숨김을 해제합니다. 요소. 이러한 미묘한 조작으로 인해 다시 그리기가 발생하고 의도한 스타일 변경이 전파됩니다.

추가 고려 사항

이 솔루션이 "블록"을 넘어서는 스타일 변경에 적용되는지 여부는 테스트해야 합니다. 재산. 그러나 저자의 상황에서는 간단하면서도 효과적인 해결책을 제시했다. 스타일 전파의 불일치를 제거함으로써 WebKit 기반 브라우저 전체에서 시각적으로 일관된 웹페이지를 보장합니다.

위 내용은 JavaScript를 통해 변경된 스타일을 전파하기 위해 WebKit 브라우저에 '넛지'가 필요한 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!