Serialize DOM elements, including all CSS properties

Question

I am developing a web design system such as yola.com.

I want to get a list of applied CSS properties with their values ​​for any DOM element.

For example, I have a h1 tag, and its css changes randomly with jquery ui when resizing and dragging, its text layout also changes, as well as the contents of the text by tinim, etc.

I have a save button on this page. When I click "Save", I want to save all these changes to the database using php. Now my goal is to know only the contents of the CSS and the inner text of each element. How can i do this?

Answer 1

In javascript, you can find the current element class name by calling

 element.getClassName(); 

In at least current versions of firefox and chrome, you can find directly applicable styles with

 element.getAttribute("style"); 

This will include software applied positions, for example. at http://jqueryui.com/demos/draggable/ you can do

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

and after dragging the draggable object, if you do it again, you will get the current position:

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

You can get the contents of an element using element.innerHTML. This, plus the style plus the class name, is likely to be sufficient to properly serialize the element. If you want to serialize a complete tree of complex components, this will be a slightly more complex process - innerHTML will only work for relatively simple elements.