изменение ширины он лоад
<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, время: 21:53. |