javascript - 序列化 DOM 元素,包括所有 CSS 属性

标签 javascript css dom

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

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

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

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

最佳答案

在 javascript 中,您可以通过调用

找到元素的当前类名
element.getClassName();

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

element.getAttribute("style");

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

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

在拖动 draggable 之后,如果你再做一次,你会得到当前位置:

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

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

关于javascript - 序列化 DOM 元素,包括所有 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5610978/

相关文章:

java - getElementsByTagName 向下搜索所有级别的 XML 节点

javascript - 获取父 javascript 的 CSS 最大宽度值

css - IE 10 和 11 使固定背景在使用鼠标滚轮滚动时跳转

html - 创建具有不同子类型的自定义元素

html - 在 IE11 上忽略了 css 列数

css - 将导航栏移到标题上方

javascript - "UnExpected Token Illegal"使用 Jquery 添加到 DOM 元素之前时出现错误消息

javascript - 为什么 react-transition-group 在路由更改时不调用 componentWillEnter 或 componentWillLeave?

javascript - 如何使用 Node.js 轻松地将变量传递到 View

javascript - 如何对一组数字求和,使数组的总和为 100