изменение ширины он лоад
<ul class="level1"> <li>text</li> <li>text <ul class="level2"> <li>text</li> <li>text</li> </ul> </li> </ul> Как с помощью js сделать чтобы width списка "level2" задавалась "level1 - 100px" ? Это должно происходить при открытии страницы. |
А зачем тут яваскрипт-то?
<style type="text/css"> ul.level1, ul.level1 ul { display: block; margin: 0px; } ul.level1 ul { margin-left: 100px; } ul.level1 li { display: block; list-style: none outside; padding: 0px; margin: 3px 0px; } ul.level1 li {background: yellow} ul.level2 li {background: orange} /* для декоративных целей исключительно */ </style> <ul class="level1"> <li>text</li> <li>text <ul class="level2"> <li>text</li> <li>text</li> </ul> </li> </ul> |
В моем случае, там списки с закругленными уголками и всякой декоративной ерундой. Этот вопрос с заказчиком решили уже.
Спасибо, но все же остался интерес, как это сделать на js ? |
$(window).load(function () { $('ul.level1').each(function () { $('ul.level2', this).css('width', $(this).width() - 100); }); }); Вариант на jQ, на JS многовато писать надо, тем более для примера. |
exec,
Только не .load, а .ready, самого иногда так привычка подводит. :) Кстати, с .ready связан небольшой подводный камень. С какой-то-там версии .ready вызывается не по onload, а по DOMContentLoaded (и его аналогов с readyStateChange). Все скрипты в коде к тому моменту уже отработали, но то, что цсс подгрузился - не факт. Точнее, это зависит от браузера. Ие и файрфокс задерживают выполнение скрипта на, скажем, .width(), пока стиль не подгрузится. Хром не ждет, в нем при определенной избирательной тормознутости интернетов .width может вернуть неожиданные результаты. Опера ждет 3 секунды, после чего продолжает выполнение скрипта. |
Часовой пояс GMT +3, время: 09:32. |