Как через js менять css свойства

Изменяем CSS-параметры посредством JS

Никогда не был большим фанатом JS и всегда пытался любыми способами избежать его использование, но, в последнее время, для того, чтобы добиться большей гибкости в разработке пользовательских интерфейсов, в некоторых случаях использую JS. В некоторых случаях приходится использовать даже для редактирования CSS -параметров во внешнем CSS -файле.

Для меня самого это кажется диким, но иногда это требуется и без этого просто нельзя.

Для того, чтобы изменить существующий CSS -параметр, мы будем использовать для удобства отдельные JS-функции, которые можно (даже нужно) вынести в отдельный подключаемый файл.

Функции выглядят вот так:

После того как функции JS: addStyleSheet() и addStyle() объявлены приступаем к непосредственному изменению нужного CSS -параметра. Для этого необходимо вызвать функцию addStyle() с нужным набором параметров.

К примеру, нам нужно изменить высоту (height) у блока с id sections. Для этого выполняем команду:

Использовать этот прием в своей работе или нет – решает каждый web-разработчик, но знать о такой возможности должен каждый.

Изучаем JQuery. Изменение CSS-свойств

jquery-and-css

Давно в моем блоге не было статей про JQuery. Нет, статьи с его применением были, конечно, но он там выступал в роле вспомогательного инструмента, а рубрика «Изучаем JQuery» тем временем покрывалась пылью. А между тем, пришло время, перейти к самой интересной части обучения – добавлению различных эффектов, именно то, из-за чего его берутся изучать многие люди. И в сегодняшней статье вы узнаете, как изменять CSS-свойства «на лету».

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

Однако бывают случаи, когда вам нужно изменить стиль CSS, которого нет в файле стилей, или который описать нельзя. Для таких случаев в JQuery существует метод .css() .

Для того чтобы получить значение CSS-свойства, мы должны просто передать имя свойства в качестве строки, примерно так . css(‘backgroundColor’) .

Свойства, состоящие из нескольких слов, можно записывать через дефис, как в CSS-файле ( background-color) , или разным регистром, как они записываются в DOM ( backgroundColor ). Для установки свойств CSS, метод .css() использует два способа. Первый способ – два параметра, название CSS-свойства и его значение, через запятую. Второй – карта, состоящая из пар свойство-значение.

Мы будем использовать метод . css() , точно так же как использовали .addClass() – объединим их селектором и привяжем событие. Давайте разберем метод .css() на конкретном примере. Нам понадобится следующая HTML-разметка:

В результате у нас появится вот такая страничка:

пример с текстом

На странице присутствуют две кнопки – для увеличения и уменьшения шрифта. В принципе здесь можно использовать метод .addClass() , описанный в предыдущей статье, но давайте немного усложним задачу, и представим, что нам нужно уменьшать или увеличивать текст, при каждом нажатии соответствующей кнопки. Это конечно можно реализовать, через описание отдельного класса для каждого клика, но гораздо проще будет получать текущий размер текста, и увеличивать (уменьшать) его по заданному значению.

Наш код традиционно начинается с $(document).ready() и обработчика событий кнопки $("#increase").click() :

Далее, размер шрифта можно легко получить через с помощью $(“#textbox”).css(‘fontSize’) . Однако, возвращаемое значение будет содержать как число так и единицы измерения, поэтому нам нужно сохранить каждую часть в собственную переменную, после чего мы сможем увеличить число, и заново присоединить к нему единицы измерения. Также, мы планируем использовать объект JQuery более одного раза, следовательно, было бы неплохо и его сохранить в переменную.

Первая строка внутри функции .click() сохраняет переменную c блоком #textblock .

Обратите внимание, что мы используем символ $ , в имени переменной $speech . Поскольку $ — это допустимый символ для переменных JavaScript, мы можем использовать его в качестве напоминания, что это переменная хранит объект JQuery. Следующая строка – сохраняет в переменную размер шрифта блока #textblock – например, 12px.

После этого мы используем parseFloat() и slice() . Функция parseFloat() используется для конвертирования строковых значений в числовые (десятичные). Например, строку 12, будет конвертирована в число 12. Если строка начинается с нечислового символа, parseFloat() вернет NaN, что означает: «Не числовое значение» (Not a Number).Второй аргумент функции parseFloat() , гарантирует, что число будет конвертировано именно в десятеричное значение.

Метод .sice() возвращает подстроку, начинающуюся с определенного символа строки. Поскольку название единиц измерения, которые мы используем длиной в два символа (px), мы указываем, что подстрока должна начинаться с двух последних символов основной строки.

Все что нам осталось это умножить полученное значение переменной num на 1.4, а затем установить размер шрифта, путем склеивания двух переменных num и unit :

Теперь после клика по кнопке «Увеличить», текст в блоке увеличивается, как на представленном скриншоте:

пример работы скрипта

Следующий клик по этой же кнопке, продолжает увеличивать текст в блоке.

Для того чтобы сделать работающей кнопку «Уменьшить», мы будем делить значение переменной – num/=1.4 . И чтобы не увеличивать размер кода, мы можем объединить два обработчика событий .click() в один, через класс button . Затем, после установки переменных, мы легко можем умножать или делить, основываясь на ID кнопки, которая была нажата. Вот как должен выглядеть код:

Выше был приведен простейший пример использования метода .css() на практике. Можно привести еще один пример использования этого метода.

Разделение пунктов меню

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

Для такого меню потребуется следующая HTML-разметка:

Вот так будет выглядеть наше меню:

меню

А для того чтобы убрать правый разделитель у последнего пункта меню (четвертый пункт), можно использовать вот такой код:

И в результате у нас получается вот такое меню:

меню после применения javascript

Как видите пользоваться этим методом довольно просто и удобно, но все-таки старайтесь не злоупотреблять им, а использовать только в тех случаях, когда нет возможности добавить нужный стиль в CSS-файл.

8 комментариев

А еще, по поводу разделения пунктов меню, можно просто в css написать (без Js) 🙂

Как изменить свойство css класса javascript

Изменить свойство css дочернего класса
Всем привет! С javascript работаю недавно, столкнулся с такой на первый взгляд простой проблемой.

Как средствами JavaScript определить содержание класса в CSS
Есть html файл в котором используются CSS классы для различных тегов. Можно ли каким-то.

Изменить CSS свойство "background-img" через JS
Как изменить CSS свойство "background-img" через JS? Так делаю, но он ругается потому, что там.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *