RuntimeStyle attribute_javascript 기술 사용에 대한 토론 기사

IE에서 제공하는 DOM을 IE에서 사용하면 스타일 관련 속성이 세 가지 그룹인 스타일, 런타임 스타일 및 현재 스타일이라는 것을 알 수 있습니다. 이 기사에서는 이 세 가지 스타일의 기능과 기본 용도에 대해 이야기했지만, 점점 더 깊이 있게 사용하면서 마침내 RuntimeStyle 특성을 사용하는 방법에 대한 통찰력을 갖게 되었습니다.

우선, IE 레이아웃 및 렌더링 원칙의 제한으로 인해 style 속성에는 항상 정의할 수 없는 몇 가지 정의가 있기 때문에 그 존재는 currentStyle보다 훨씬 덜 의미가 있습니다. currentStyle과 동기화됩니다. 그것은 무엇을 의미합니까? 예를 들어 TR 요소의 line-height 또는 table-layout 스타일 속성을 설정하지 않으면 100 style="height: 1px"라고 쓰려고 해도 테이블 행 높이를 얻을 수 없습니다. 효과가 없습니다. 이때 스타일의 높이는 1px이지만 currentStyle의 높이는 여전히 테이블의 실제 높이입니다. Firefox는 RuntimeStyle과 currentStyle을 제공하지 않습니다. 이 동기화되지 않은 문제를 어떻게 해결할 수 있는지 궁금합니다. 표현할 수 없는 스타일 속성을 역동기화합니까?

직설적으로 말하면, 런타임스타일 속성은 케이크에 아이싱을 추가하는 데 사용됩니다. 그러면 런타임스타일을 통해서만 수행할 수 있는 기능이나 효과가 있습니까? 가지고 있는 경우 요청해야 합니다. 예를 들어 이 블로그의 페이지 색상 반전 기능은 RuntimeStyle 속성을 사용해야만 얻을 수 있습니다. 또한, RuntimeStyle 속성의 설정은 스타일에 동기화될 필요도 없고 동기화되지도 않으므로 요소의 스타일을 수정하려면 런타임Style을 사용하는 것이 더 효율적이어야 합니다. 그러나 이러한 비동기화는 상대적으로 숨겨진 문제를 야기하기도 합니다. dom을 항상 운영한다면,runtimeStyle과 currentStyle을 사용하는 데에는 문제가 없습니다. 외부 HTML 속성 . 이때 싱크가 맞지 않는 스타일의 문제가 나왔는데, 우연히 접하게 되었을 때 프로그램 실행에 오류가 전혀 없을 텐데, 아무리 시도해도 오류가 발생하지 않아 매우 우울했습니다. 기대효과.

요약 1: RuntimeStyle 특성은 쌍으로 사용해야 합니다. 즉, element.runtimeStyle.xxx = 'attribue'; 및 element.runtimeStyle.xxx = '';입니다. element.style.xxx = 'attribue1'; 및 element.style.xxx = 'attribue2';를 명확하게 작성할 수 있으면 런타임 스타일을 사용할 필요가 없습니다. 동일한 요소에 스타일과 런타임 스타일을 혼합하는 것은 금지되어야 합니다. 스타일과 런타임 스타일은 서로 다른 적용 우선순위를 가지므로 부주의하게 혼합하면 설명할 수 없는 문제가 발생하여 디버깅의 문제와 어려움이 증가할 뿐입니다.

요약 2: innerHTML 및 externalHTML 작업이 포함된 프로그래밍 환경에서는 RuntimeStyle 속성을 사용하지 마세요. 그렇지 않으면 주의하지 않으면 우울증에 빠질 것입니다. RuntimeStyle의 수정은 HTML의 스타일과 동기화되지 않기 때문에 이 문제는 위에서 언급한 동일한 요소에서 스타일과 RuntimeStyle을 혼합하는 문제와 유사합니다.

물론 처음 구현할 때 믹싱을 사용합니다. 일반적으로 큰 실수는 없을 것이라는 점을 프로그래머는 매우 잘 알고 있습니다. 그러나 이러한 코드는 나중에 디버깅 및 업데이트 시 심각한 오류를 유발할 수 있습니다.