Сериализация элементов 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 будет хорошо работать только для относительно простых элементов.