JavaScript 스 니펫 힘 Dom 요소 Redraw/Repaint

JavaScript 코드 스 니펫 DOM 요소 REDRAW/Repaint 강제. 약간 해킹되지만 최후의 수단으로 유용합니다.

<..> 트랜스트를 사용하여 var element = document.getElementById('id'); var n = document.createTextNode(' '); var disp = element.style.display; // don't worry about previous display style element.appendChild(n); element.style.display = 'none'; setTimeout(function(){ element.style.display = disp; n.parentNode.removeChild(n); },20); // you can play with this timeout to make it as short as possible Transit.js와 같은 전환 플러그인을 사용하는 경우 다음에도 효과가 있습니다.

<:> css :

DOM 요소를 강요하는 것에 대한 자주 묻는 질문 (FAQ) javaScript에서 DOM 요소 REDRAW/Repaint 란 란 무엇입니까?

<span>$('#element')
</span>    <span>.transition({ x: '-500px', easing: 'snap', duration:'0' })
</span>    <span>.transition({ x: '0', easing: 'snap', duration:'0' })
</span>    <span>.css('z-index','10');</span>

JavaScript에서 문서 개체 모델 (DOM) 요소 REDRAW 또는 Repaint는 웹 페이지에서 요소의 시각적 표현을 업데이트하는 프로세스를 나타냅니다. 이것은 요소의 스타일이나 내용을 변경 한 경우 종종 필요합니다. 브라우저는 대부분의 대부분의 리 그리프 및 리페인트를 자동으로 처리하지만 경우에 따라 JavaScript를 사용 하여이 프로세스를 수동으로 트리거해야 할 수도 있습니다. 이것은 브라우저의 다음 리 페인트 사이클을 기다리지 않고 요소가 즉시 업데이트되도록하려는 상황에 유용 할 수 있습니다.

#element <span>{
</span>     <span>position: absolute;
</span>     <span>right: '-500px';
</span>     z<span>-index: -1;
</span><span>}</span>

왜 DOM 요소를 다시 그리기/리 페인트하도록 강요해야합니까?

DOM 요소를 다시 그리거나 다시 칠하도록 강요 해야하는 몇 가지 이유가 있습니다. 한 가지 일반적인 이유는 요소 스타일이나 내용의 변화로 인해 발생한 시각적 결함이나 이상을 고치는 것입니다. 또 다른 이유는 브라우저의 다음 리 페인트 사이클을 기다리지 않고 변경 직후에 요소가 업데이트되도록하는 것입니다. 이것은 게임 또는 대화식 응용 프로그램과 같이 사용자에게 실시간 피드백을 제공 해야하는 상황에서 특히 유용 할 수 있습니다.

DOM 요소를 JavaScript를 사용하여 REDRAW/Repaint를 강제로 강제로 강요 할 수 있습니까?

요소의 스타일이나 내용을 작고 일시적으로 변경하여 DOM 요소가 JavaScript를 사용하여 재발하거나 다시 칠할 수 있습니다. 이렇게하면 브라우저의 리 페인트 프로세스가 트리거되어 요소가 즉시 업데이트됩니다. 간단한 예는 다음과 같습니다.

var element = document.getElementById ( 'myElement'); element.style.display = '';

jQuery를 사용하여 DOM 요소를 다시 그리기/리 페인트하도록 강요 할 수 있습니까?

예, DOM 요소를 jQuery를 사용하여 다시 그리거나 다시 칠할 수 있습니다. 프로세스는 JavaScript 방법과 유사하지만 약간의 차이가 있습니다. 예는 다음과 같습니다.

var $ 요소 = $ ( '#myelement'); DOM 요소가 다시 그리기/리 페인트하도록 강요하는 잠재적 인 문제 나 단점이 있습니까?

DOM 요소가 특정 상황에서 유용 할 수 있지만, 가능하다는 것을 알고 있어야합니다. 또한 성능에 부정적인 영향을 미칩니다. 다시 그리기 및 재 설계 작업은 특히 복잡한 요소 또는 많은 양의 데이터에 대해 리소스 집약적 일 수 있습니다. 따라서 일반적 으로이 기술을 드물게 사용하는 것이 좋습니다.

JavaScript와 DOM의 맥락에서 Redraw와 JavaScript의 리 페인트 사이에 차이가 있습니까? Redraw와 Refaint는 본질적으로 동일한 프로세스를 나타냅니다. 웹 페이지에서 요소의 시각적 표현을 업데이트합니다. 그러나 일부 개발자는 "redraw"라는 용어를 사용하여 페이지의 레이아웃에 영향을 미치는 변경 사항 (예 : 요소의 크기 또는 위치 변경 등)을 사용하는 반면 "Repaint"는 요소의 모양에 영향을 미치는 변경 사항을 말합니다 ( 색상 또는 배경 이미지 변경과 같은). 신체 요소의 스타일이나 내용을 작고 일시적으로 변경하여 페이지의 모든 요소. 그러나 이것은 매우 자원 집약적 일 수 있고 성능 문제를 일으킬 수 있으므로주의해서 수행해야합니다.

페이지의 특정 부분을 다시 그리기/재 설계 할 수 있습니까?

. 예, 특정 DOM 요소 또는 요소 그룹을 타겟팅하여 페이지의 특정 부분을 다시 그리기 또는 재판매 할 수 있습니다. 위의 예에서 볼 수 있듯이 일반 JavaScript 또는 jQuery를 사용하여 수행 할 수 있습니다.

모든 브라우저에서 Redraw/Repaint 작업을 강요합니까?

요소의 스타일이나 콘텐츠를 작고 일시적으로 변경하는 것은 모든 최신 브라우저에서 작동해야합니다. 그러나 호환성을 보장하기 위해 여러 브라우저에서 코드를 테스트하는 것이 항상 좋은 생각입니다.

CSS를 사용하여 REDRAW/Repaint를 강제로 사용 할 수 있습니까?

예, CSS를 사용하여 강제로 요소 스타일을 작고 일시적으로 변화시켜 다시 그리거나 다시 칠하십시오. 이는 CSS 클래스를 추가하거나 제거하거나 요소의 스타일 속성을 직접 수정하여 수행 할 수 있습니다. 그러나이 방법은 브라우저의 CSS 렌더링 엔진에 따라 JavaScript 또는 jQuery를 사용하는 것만 큼 신뢰할 수 없을 수 있습니다.

위 내용은 JavaScript 스 니펫 힘 Dom 요소 Redraw/Repaint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!