С помощью JavaScript можно без проблем манипулировать всеми характеристиками узлов на html-странице . Но, как правило, изменение характеристик узлов «вручную» средствами JavaScript слишком трудоемкая работа, и требует от программиста знание тонкостей HTML и CSS.
Возможности CSS позволяют большую часть этой задачи переложить на верстальщика, а программисту останется лишь реализовать манипуляцию состояниями этих узлов. Такой подход к решению задачи позволяет обойти большую часть «подводных камней» и решить многие задачи без особых трудностей.
Самый простейший пример —скрытие/отображение блока на странице средствами JavaScript. Обычно это делается так:
Посмотрим что получилось.
Тут все отлично работает, и придраться не к чему. Возьмем другой пример:
Допустим, по клику на кнопке «Показать всю правду» нам нужно скрыть узел span#lie (тег span c идентификатором lie). А при клике на кнопке «Вернуть, как было» показать этот узел снова. Попробуем применить ту же самую функциональность для реализации этой задачи:
Результат работы проверим в действии.
Как видно из примера, кнопка «Показать всю правду» выполняет свою задачу так, как и хотелось. А вот при клике на кнопку «Вернуть, как было»текст появляется вновь, но с некоторыми искажениями — появляются совершенно ненужные переносы строк.
В чем причина? Те, кто немного знают CSS уже давно поняли, куда я клоню. Все дело в том что, если свойству display любого узла установить значение block, то узел становится блочным элементом, который занимает по умолчанию 100% ширины. В нашем случае необходимо устанавливать значение inline, а не block. И зачем программисту знать такие тонкости? В данном случае вовсе не обязательно.
Можно пойти другим путем — например, изменить код функции hide, добавив сохранение исходного значения в промежуточную переменнную. Но есть способ лучше.
Повернем возможности CSS в нашу сторону. Создадим специальныйCSS-класс hidden, в котором зададим нужные нам свойства. Теперь остается только назначить этот класс нужному узлу, и он исчезнет с экрана. Убрав этот класс, он без проблем вернется в строй.
Вот теперь пример работает так, как нужно.
Остается, правда, еще одна проблема — не учитывается случай, при котором узел уже имееткакой-либо класс. Попробуйте решить эту проблему самостоятельно.
В общем случае данный подход можно охарактеризовать так: нужно стремиться манипулировать не характеристиками узлов, а их состояниями. Наличие того или иного класса у узла и есть то самое состояние. Учитывая что узел может сочитать несколько классов, можно даже довольно сложные манипуляции свести к простой схеме переключения состояний. А потом попросить верстальщика подготовить в таблице стилей специальные правила для этих состояний.
Оригинал статьи
Возможности CSS позволяют большую часть этой задачи переложить на верстальщика, а программисту останется лишь реализовать манипуляцию состояниями этих узлов. Такой подход к решению задачи позволяет обойти большую часть «подводных камней» и решить многие задачи без особых трудностей.
Самый простейший пример —
<script> function hide(nodeId) { var node = document.getElementById(nodeId); if (node) { node.style.display = 'none'; } } function show(nodeId) { var node = document.getElementById(nodeId); if (node) { node.style.display = 'block'; } } </script> <input type="button" value="Скрыть" onclick="hide('test')" /> <input type="button" value="Показать" onclick="show('test')" /> <div id="test">Текст для примера. Текст для примера.</div>
Посмотрим что получилось.
Тут все отлично работает, и придраться не к чему. Возьмем другой пример:
<p>Мама мыла <span id="lie">раму. Сын любит</span> папу.</p> <input type="button" value="Показать всю правду" /> <input type="button" value="Вернуть, как было" />
Допустим, по клику на кнопке «Показать всю правду» нам нужно скрыть узел span#lie (тег span c идентификатором lie). А при клике на кнопке «Вернуть, как было» показать этот узел снова. Попробуем применить ту же самую функциональность для реализации этой задачи:
<script> function hide(nodeId) { var node = document.getElementById(nodeId); if (node) { node.style.display = 'none'; } } function show(nodeId) { var node = document.getElementById(nodeId); if (node) { node.style.display = 'block'; } } </script> <p>Мама мыла <span id="lie">раму. Сын любит </span>папу.</p> <input type="button" value="Показать всю правду" onclick="hide('lie')" /> <input type="button" value="Вернуть, как было" onclick="show('lie')" />
Результат работы проверим в действии.
Как видно из примера, кнопка «Показать всю правду» выполняет свою задачу так, как и хотелось. А вот при клике на кнопку «Вернуть, как было»текст появляется вновь, но с некоторыми искажениями — появляются совершенно ненужные переносы строк.
В чем причина? Те, кто немного знают CSS уже давно поняли, куда я клоню. Все дело в том что, если свойству display любого узла установить значение block, то узел становится блочным элементом, который занимает по умолчанию 100% ширины. В нашем случае необходимо устанавливать значение inline, а не block. И зачем программисту знать такие тонкости? В данном случае вовсе не обязательно.
Можно пойти другим путем — например, изменить код функции hide, добавив сохранение исходного значения в промежуточную переменнную. Но есть способ лучше.
Повернем возможности CSS в нашу сторону. Создадим специальный
<style> .hidden {display: none;} </style> <script> function hide(nodeId) { var node = document.getElementById(nodeId); if (node) { node.className = 'hidden'; } } function show(nodeId) { var node = document.getElementById(nodeId); if (node) { node.className = ''; } } </script> <p>Мама мыла <span id="lie">раму. Сын любит </span>папу.</p> <input type="button" value="Показать всю правду" onclick="hide('lie')" /> <input type="button" value="Вернуть, как было" onclick="show('lie')" />
Вот теперь пример работает так, как нужно.
Остается, правда, еще одна проблема — не учитывается случай, при котором узел уже имеет
В общем случае данный подход можно охарактеризовать так: нужно стремиться манипулировать не характеристиками узлов, а их состояниями. Наличие того или иного класса у узла и есть то самое состояние. Учитывая что узел может сочитать несколько классов, можно даже довольно сложные манипуляции свести к простой схеме переключения состояний. А потом попросить верстальщика подготовить в таблице стилей специальные правила для этих состояний.
Оригинал статьи