В очередной раз всем привет, всем тем, кто интересуется темой написания скриптов на Java Script. Здесь я умышленно не заикнулся о программировании, так как заметки мои все же любительские и я их описываю так, как могу, умею и понимаю. Так вот, в этот раз я решил попробовать, как же можно трансформировать, менять, конвертировать, если даже хотите проводить метаморфозы со стилями на страницы с помощью JS. В принципе опыт получился вполне удачным и осязаемым, им я и хочу поделиться и оставить кое-что и себе на память. Вдруг когда взгляну для того чтобы использовать что-то в своих микропроектах.
Вначале пару слов скажу о том, что же меняет наши стили, то есть какой оператор и как его записывать и использовать.
Оператор getElementById('id...').style меняющий стиль
В качестве исполнительного оператора используется getElementById. На самом деле он обрамляется дополнительными данными, назову это так, и после этого начинает работать.
Так вот, если к конкретному примеру, то оператор должен обрасти впереди тем куда мы будем применять стиль, скажем к конкретному диву или всему документу document. Далее идет оператор с указанием id для которого будет замена, потом приписка, что это изменение стиля style. После информация об изменяющемся стиле, будь то прозрачность, размер шрифта, цвет фона, да все то, что собственно и используется как CSS для создания странички HTML. Пусть будет вроде того...
document.getElementById('id1').style.opacity
Что же, теперь пришло время переходить к примерам. В моем случае было создано несколько вариантов. Сразу же вспоминаю один из примеров, который вполне можно отнести к этой теме. Когда по факту стиль менялся при прокручивании странички. Ведь положение это не что иное как стиль!
Примеры изменения стилей CSS с помощью JS
Итак, в первой примере будет меняться размер шрифта. Что мне здесь особо нравится, так это то, как я решил проблему с чередованием условия. То есть обычно было дело так. Назначался цикл, как по нему срабатывали все условия или количество срабатываний, то он обнулялся. Здесь же использовано вот такое чудо - %2. То есть это значение при остатке на 2. Получается в одном случае при четных числах там остатка не будет, в других случаях будет 1. Это если прибавлять планомерно по 1 каждый раз... Ладно хватит болтать, смотрим пример.
Пример 1
* - transition: 2s; участвует в плавной трансформации стиля. Тоже полезно порой применять для сглаживания.
Второй вариант практически тоже самое, но здесь меняется прозрачность. А во вторых, это классическое решение с циклом и оператором switch. В общем тоже вполне интересненько получается.
Пример 2
Третье. Этот вариант по мне так примечателен интерактивностью, которую я решил ввести с помощью кнопки. То есть при каждом нажатии кнопки мы сами меняем переменную, а она уже участвует в коде с условием, где условие определяет стиль нашего блока. После цикл также обнуляется и все начинается сначала.
Пример 3
Смотрим код.
Четвертый вариант опять же показывает как можно изменять стили в виде стиля позиционирования на странице. По мне он примечателен тем, что дает возможность уже воочию представить, как можно сделать интерактивный элемент. То есть использовать такие элементы не только для оформления сайта, но пойти дальше. Скажем уже пытаться создать какой-то управляемый объект в игре! А почему бы и нет!?
Пример 4
Смотрим код. * - здесь критерий относительно верха, а в примере относительно левого края.
Динамика в стилях за счет переменной
Не хочу быть непонятым, вроде как и до этого динамика наблюдалась вполне и явно, но все же если говорить по существу, то с некоторыми ограничениями. Все дело в том, что для каждого динамического изменения существовал свой if в коде, он как раз и прописывал изменение за счет фиксированной записи цвета или пикселей. Однако не рассматривался случай, когда правило для изменения стиля будет создавать переменная. Если будет так, то изменения будут происходить по двум правилам. Первое, это по if, второе по изменению переменной, которая станет задавать скажем размер для шрифта.
Собственно смотрим как это получилось за счет контаминации строки i*2+"px"
Пример 5
Смотрим код.
Эту статью, как собственно и многие другие можно было бы перемешать между собой, все они порой перекликаются очень плотно и схоже. Однако получилось как получилось.