序列化DOM元素，包括所有CSS属性

Question

我正在开发像yola.com这样的在线网站设计系统。

我想获取一个应用CSS属性的列表及其值到任何DOM元素。

例如，我有一个h1标签，当调整大小和拖动时，它的css随jquery ui随机改变，也会通过tinymce改变其文本修饰和文本内容等等。

我在此页面中有一个保存按钮。当我单击保存时，我想使用php将所有这些更改保存到数据库中。现在我的目标是只知道每个元素的CSS和内部文本内容。我怎么能这样做？

Answer 1

在javascript中，您可以通过调用

找到元素的当前类名

element.getClassName();

至少在当前版本的firefox和chrome中，你可以找到直接应用的样式

element.getAttribute("style");

这将包括以编程方式应用的职位，例如：在http://jqueryui.com/demos/draggable/你可以做到

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

在拖动拖动器后，如果再次执行此操作，您将获得当前位置：

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

您可以使用element.innerHTML获取元素的内容。加上样式加上类名可能足以正确地序列化元素。如果你想序列化一个完整的复杂组件树，那将是一个稍微复杂的过程 - innerHTML只适用于相对简单的元素。