CSS в помощь JavaScript программисту

С помощью JavaScript можно без проблем манипулировать всеми характеристиками узлов на html-странице. Но, как правило, изменение характеристик узлов «вручную» средствами JavaScript слишком трудоемкая работа, и требует от программиста знания тонкостей HTML и CSS.

Возможности CSS позволяют большую часть этой задачи переложить на верстальщика, а программисту останется лишь реализовать манипуляцию состояниями этих узлов. Такой подход к решению задачи позволяет обойти большую часть «подводных камней» и решить многие задачи без особых трудностей.

Самый простейший пример — скрытие/отображение блока на странице средствами JavaScript. Обычно это делается так:

<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 в нашу сторону. Создадим специальный CSS-класс hidden, в котором зададим нужные нам свойства. Теперь остается только назначить этот класс нужному узлу, и он исчезнет с экрана. Убрав этот класс, он без проблем вернется в строй.

<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')" />

Вот теперь все работает так, как нужно:

Остается, правда, еще одна проблема — не учитывается случай, при котором узел уже имеет какой-либо класс. Попробуйте решить эту проблему самостоятельно.

В общем случае данный подход можно охарактеризовать так: нужно стремиться манипулировать не характеристиками узлов, а их состояниями. Наличие того или иного класса у узла и есть то самое состояние. Учитывая что узел может сочитать несколько классов, можно даже довольно сложные манипуляции свести к простой схеме переключения состояний. А потом попросить верстальщика подготовить в таблице стилей специальные правила для этих состояний.

Постараюсь в следующий раз дать примеры реализации более сложных задач с использованием такого подхода.