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

【问题标题】：Serialize DOM elements including all CSS properties序列化 DOM 元素，包括所有 CSS 属性
【发布时间】：2011-04-10 09:48:54
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案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 只适用于相对简单的元素。

【讨论】：