序列化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 仅适用于相对简单的元素。