Serialize DOM elements including all CSS properties

Question

I am developing a online website design system like yola.com.

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

For example, I have a h1 tag and its css changes randomly by jquery ui when resizing and dragging, also changes its text decoration and also the text contents by tinymce and so on.

I have a save button in this page. When I click save, I want to save all these changes in to a database using php. Now my aim is to know only the css and inner text content of each element. How can I do this?

Answer 1

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

element.getClassName();

In at least current versions of firefox and chrome you can find the directly applied styles with

element.getAttribute("style");

This will include programmatically applied positions, e.g. on http://jqueryui.com/demos/draggable/ you can do

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

and after dragging the draggable around, if you do it again, you'll get the current position:

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

You can get the contents of the element with element.innerHTML. That, plus the style plus the classname will probably be enough to serialise an element correctly. If you want to serialise a full tree of complex components, it would be a slightly more complicated process - innerHTML will only work well for relatively simple elements.