어떻게 DOM 요소에서 다른 DOM 요소로 프로그래밍 방식으로 모든 스타일 속성을 복사 할 수 있습니까?

Question

두 프레임으로 구성된 페이지가 있고 자바 스크립트를 통해 요소와 중첩 된 모든 요소를 ​​복사해야합니다 (ul/li 트리) 그리고 가장 중요한 것은 한 프레임에서 다른 프레임으로 스타일이 적용된다는 것입니다.

innerhtml을 지정하여 모든 콘텐츠를 가져오고 dest.style.left 및 dest.style.top을 사용하여 두 번째 프레임에 새 요소를 배치 할 수 있습니다. 그러나 나는 모든 스타일 정보를 얻으려고하고 있으며 아무 일도 일어나지 않고 있습니다.

getComputedStyle을 사용하여 각 노드를 반복하면서 대상 노드 목록의 동일한 위치에 할당하면 각 소스 요소의 최종 스타일을 얻습니다. 시각적으로 스타일을 변경하는 일은 없습니다.

무엇이 누락 되었습니까?

var completeStyle = window.getComputedStyle(element1, null).cssText; 
element2.style.cssText = completeStyle; 

불행하게도, getComputedStyle 대신 currentStyle를 사용하는 인터넷 익스플로러에서 지원하지 않는 :

Answer 1

: 아무도

---

그것에 대해 생각

:-) 그 날 뛰는 당신이 for...in 문을 사용하여 IE에서 위를 에뮬레이션 할 수 있다면, 시도하고 당신을 위해 뭔가를 알아낼 수 있습니다

cloneNode을 사용해 보셨습니까? 그것은 요소를 복사 할 수 있고 모든 자식이 급습합니다. http://www.w3schools.com/dom/met_element_clonenode.asp

Answer 2

는 getComputedStyle를 사용하면 CSS 문자열의 전체 계산 된 스타일을 가져올 것이다 cssText 속성을 얻을 수 있습니다. 두 번째 불행한 점은 currentStyle이 cssText에 대해 null을 반환한다는 것이므로 같은 방법을 IE에 적용 할 수 없습니다.

var completeStyle = ""; 
if ("getComputedStyle" in window) 
    completeStyle = window.getComputedStyle(element1, null).cssText; 
else 
{ 
    var elStyle = element1.currentStyle; 
    for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; } 
} 

element2.style.cssText = completeStyle; 

Answer 3

음, 나는 소스 태그에서 [계산 된] 스타일 정보를 얻으려고하는 원래의 압박을 포기했지만, 작동시키지 못했습니다.

그래서 대신 내가이 시도하고 일을했다 ...

먼저 나는 소스 프레임에서 -style- 태그를 잡고, 나는 두 번째의 -head- 태그의 말미에 appendChilded 틀. 이 유용한 입증하는 은 ... How do you copy an inline style element in IE?

은 그 때 나는 각 내가 계층 구조의 첫 번째 프레임을 일치되도록 상속하기 위해 필요한 아이디 또는 스타일 클래스를 가진 몇 가지 중첩 된 DIV 요소를했다. 그런 다음 원본 프레임의 태그 중 innerhtml을 복사하여 두 번째 프레임의 본문에 마지막으로 추가하고 붙여 넣었습니다. 마술처럼 모든 것이 작동했습니다.

var topd = doc.createElement('div'); // make a div that we can attach all our styles to so they'll be inherited 
topd.id = 'menuanchorelement'; 
// shove our desired tag in the middle of a few nested elements that have all the classes we need to inherit... 
topd.innerHTML = "<div id='multi-level'><ul class='menu'>" + dh.innerHTML + "</ul></div>"; 

doc.body.appendChild (topd); // voila