Получение DOM дерева со стилями как объекта JS
Доброго времени суток, уважаемые форумчане! Начинающий яваскриптЁр просит совета. Имеются теоретические навыки, не хватает опыта составления алгоритмов, не до конца понимаю, что и как должно происходить.
Задача следующая: На входе имеем некую HTML-страницу со стилизованным текстом, представленную DOM-деревом тегов. На выходе необходимо получить эквивалентную структуру этого DOM-дерева с сохранением соответствующих стилей для каждого DOM HTML элемента (всякие padding-и, margin-ы и font-ы) в виде объекта javascript, он же, как я понимаю, ассоциативный массив. Буду благодарен за любые советы, примеры (желательно с комментариями) и ссылки на литературу. Заранее спасибо! |
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div class="drag_">
<img src="icons/folder.png" class="icons" draggable>
<img src="icons/google-plus.png" class="icons" draggable>
<img src="icons/wordpress.png" class="icons" draggable>
<img src="icons/network_drive_3.png" class="icons" draggable>
<img src="icons/drupal.png" class="icons" draggable>
<img src='icons/zune.png 'class="icons" draggable>
<img src="icons/controller256.png" class="icons" draggable>
<img src="icons/router.png" class="icons" draggable>
<img src="icons/xbox_disc.png" class="icons" draggable>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
|
что бы получить стили которые находятся в отдельном файле
function getComputed (obj){
if ( obj.ownerDocument && obj.ownerDocument.defaultView ) {
return obj.ownerDocument.defaultView.getComputedStyle( obj, null );
} else if ( obj.currentStyle ) {
return obj.currentStyle;
}
return null;
}
|
| Часовой пояс GMT +3, время: 13:28. |