我正在开发一个像 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/