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

Question

6

我正在开发一个类似yola.com的在线网站设计系统。

我希望能够获取任何DOM元素应用的CSS属性列表及其值。

例如，我有一个h1标签，它的CSS会在调整大小和拖动时随机更改，还会通过tinymce更改文本装饰和文本内容等。

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

- thecodeparadox

1

什么是“实现动态CSS属性”？ - BoltClock

1

投票关闭。你需要添加更多的上下文。 - JohnP

2

哪些属性？通过内联样式设置的属性？通过作者样式表设置的属性？通过浏览器样式表设置的属性？仅标准属性？还是专有浏览器属性？ - Quentin

1

看一下这个问题：https://dev59.com/m1HTa4cB1Zd3GeqPVNyk 这是一个起点。 - JohnP

2

我修改了问题的标题，以更清楚地表达您想要什么。如果您不喜欢它，请随意回滚。 - Pekka

显示剩余7条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kybernetikos · Accepted Answer

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