2011-04-10 8 views
6

yola.com과 같은 온라인 웹 사이트 디자인 시스템을 개발 중입니다.모든 CSS 속성을 포함한 DOM 요소 직렬화

적용된 CSS 속성 목록과 그 값을 모든 DOM 요소에 가져오고 싶습니다.

예를 들어 h1 태그가 있고 그 크기가 jquery UI에 의해 임의로 변경되고 크기 조정 및 드래그 할 때 텍스트 장식과 텍스트 내용이 주석으로 변경됩니다.

이 페이지에 저장 버튼이 있습니다. 저장을 클릭하면 이러한 모든 변경 사항을 PHP를 사용하여 데이터베이스에 저장하려고합니다. 이제는 각 요소의 CSS 및 내부 텍스트 내용 만 알면됩니다. 어떻게해야합니까?

+1

"CSS 속성을 즉시 사용할 수 있습니까?" – BoltClock

+1

투표를 종료 하시겠습니까? 추가 컨텍스트를 추가해야합니다 – JohnP

+2

어느 것입니까? 인라인 스타일을 통해 설정합니까? 저자 스타일 시트에 설정된 것들? 브라우저 스타일 시트에 설정되어 있습니까? 표준 속성 만? 독점적 인 브라우저 속성도 있습니까? – Quentin

답변

2

자바 스크립트에서 당신은 당신이 직접

element.getAttribute("style"); 

이에 스타일을 적용 찾을 수 있습니다 파이어 폭스와 크롬의 적어도 현재 버전

element.getClassName(); 

를 호출하여 요소의 현재 클래스 이름을 찾을 수 있습니다 프로그래밍 방식으로 적용된 위치를 포함합니다.

document.getElementById('draggable').getAttribute("style"); 
"position: relative; left: 63px; top: 39px; " 

당신은 요소 요소의 내용을 얻을 수 있습니다 : http://jqueryui.com/demos/draggable/에 당신은

document.getElementById('draggable').getAttribute("style"); 
"position: relative; " 

하고 다시 그것을 할 경우, 현재 위치를 얻을 수 있습니다, 주위에 드래그를 드래그 한 후 할 수있는 .innerHTML. 플러스 스타일과 클래스 이름을 사용하면 요소를 올바르게 serialize 할 수 있습니다. 복잡한 구성 요소의 전체 트리를 직렬화하려면 약간 더 복잡한 프로세스가 필요합니다. innerHTML은 상대적으로 단순한 요소에만 적합합니다.