Дима Фитискин

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

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

Мама мыла раму. Сын любит папу.

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

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

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

max
29 Февраля
Во всех фреймворках в функциях показа элемента используется обнуление свойсва display, а не присвоение ему значения block. То есть, если элемент inline, то при присвоении ему display = "" он будет inline.
Дима Фитискин
29 Февраля
А точнее примет значение по умолчанию. Вы правы.

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

allatone
4 марта
Пример не очень. Такое делается как раз «явно». Это эффективно в том случае, когда надо менять несколько свойств у элемента (цвет, размер шрифта... и т.п.) одновременно. Тогда, действительно удобно, то, что эти свойства определяются сначала на этапе разработки дизайна, а затем классами/индификаторами в CSS.
Дима Фитискин
5 марта
allatone, описанный метод как раз для тех случаев где нужно много чего менять у свойств тегов. Я просто остановился на одном свойстве чтобы сделать акцент на самом методе. Еще я хотел чтобы код был до безобразия простым, и понятным.

Как уже писал, в следующий раз сделаю пример более наглядным. По возможности хочу показать что-то из реальных проектов.
Владимир Вашурин
12 марта
Лучше работать с CSS классами и, соответственно, управлять ими в динамике. Так будет проще, быстрее и дешевле в плане разработки и поддержке кода. Опять же принцип разделения кода от его представления.
Было б интересно почитать про управления CSS классами из JS (т.е. через className).
Дима Фитискин
12 марта
Владимир, не совсем понял суть вашего комментария.
Лучше работать с CSS классами и, соответственно, управлять ими в динамике.

Статья как раз о приимуществах управления свойствами на основе CSS классов.
Владимир Вашурин
12 марта
Но тут не было примера, как поступать, в случае если у HTML объекта несколько CSS классов или уже есть какой то класс (был необходим для верстальщика), а удалять/добавлять необходимо не все, а один или два.
Дима Фитискин
12 марта
Владимир, я умышленно не стал развивать этот вопрос, оставив его на потом. Иначе всё могло свестись к обсуждению реализации, а сам подход остался бы не замечанным. А статья как раз о подходе.

Тогда дам пару примеров реализации в следующей статье. Чтобы можно было поспорить какой лучше.
cmd
30 августа
Спасибо, пригодилось. Я нуб, так что критиковать нечего. Работает быстро и правильно.
B~Vladi
5 мая
В нашем случае необходимо устанавливать значение inline, а не block. И зачем программисту знать такие тонкости? В данном случае вовсе не обязательно.

В топку такого программиста! Бред.
Дима Фитискин
8 мая
B~Vladi, программисты, которые вместо:

node.className = 'hightlight';

пишут что-то такое:

node.style.background = "#fac";
node.style.border = "solid red 1px";
node.style.padding = "90px";
node.style.color = "#caf";

будут гореть в аду. Вечно!
B~Vladi
12 мая
Имхо, кто верстает, тот пусть и пишет скритп, т.к. знаю по себе - бывает такое наверстаешь (дизайнеры - зло), то простейшие вещи (например, выезжающая панель) нереально сделать, не зная хорошо кода вёрстки. Получается, что всё равно нада вникать во всё это и, возможно, дописывать своих стилей чтобы не сгореть в аду. А для всего этого необходимо занть чем отличается display:inline от display:block и видеть с чем ты работаешь (в этом примере текст (или inline)). Конечно в большинстве случаев бывает просто что-либо докрутить к сайту, но этот пример с display не прокатил. Детский сад.
Дима Фитискин
13 мая
B~Vladi, более года назад я уже прокомментировал про уровень сложности примера. А еще специально для вас поясню: знать и грамотно использовать разные понятия. Я прекрасно знаю какой display мне поставить, но тем не менее я напишу класс hide, а в скрипте просто его назначу нужному узлу. Многие знающие ассемблер не стесняются программировать на языке более высокого уровня, на си например.