Изменение стилей через JavaScript

Изменение стилей через JavaScript

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

Изменение стилей через CSS

У нас есть черный заголовок в розовой рамке. За внешний вида заголовка отвечают CSS стили.


//HTML код

<div class="container">

    <h1 id="heading">Польза ананасов</h1>

</div>

//CSS код

.container {

    width: 400px;

    border: 10px solid plum;

    margin: 20px auto;

}

#heading {

    font-size: 24px;

    font-weight: 700;

    color: black;

    font-family: 'Arial Narrow Bold', sans-serif;

    text-align: center;

}

Изменение стилей через JavaScript

Если мы хотим изменит цвет у заголовка с черного на фиолетовый, то идем в CSS код и вручную заменяем значение у свойства color.


#heading {

    color: violet;

}

Заголовок стал фиолетовый.

Изменение стилей через JavaScript

Изменение стилей через JavaScript

Но мы хотим большего взаимодействия с пользователем. Чтобы цвет заголовка менялся вследствии наступления какого-нибудь события (клика мыши). Изменим наш заголовок на фиолетовый через JavaScript. Действуем уже по отработанному алгоритму:

  1. Получить элемент
  2. Обратится к свойству элемента
  3. Установит новое значение

Найдем заголовок по названию селектора и поместим его в переменную headingElement для дальнейших манипуляций. Затем получим доступ к его атрибуту style и укажем нужное нам свойство color, которое собираемся изменить. То есть, мы обращаемся к свойству color у стиля того элемента, который лежит а переменной headingElement и устанавливаем ему новое значение — фиолетовый цвет. В записи мы используем две точки, потому что у нас два объекта. Первый объект сам элемент h1, а второй объект — style, в свойствах которого хранятся все стили элемента h1.


// получение элемента по селектору

let headingElement = document.querySelector('#heading');

// обращение к интересующему свойству и присвоение нового цвета

headingElement.style.color = 'violet';

Цвет заголовка опять поменялся на фиолетовый.

Изменение стилей через JavaScript

Названия свойств

Теперь попробуем изменить цвет рамки у заголовка. Действуем по аналогии с заменой цвета. Получаем элемент container, у которого будем менять цвет свойства border-color с розового на черный.


let containerElement = document.querySelector('.container');
containerElement.style.border-color = 'black'; // нельзя писать border-color

Упс! Ничего не произошло и выскочило сообщение об ошибке, а цвет у рамки не поменялся. Почему не сработало? Ведь в обычном CSS мы бы так и написали border-color: black. Все дело в дефисе, имена свойств в JavaScript не могут содержать дефис. Поэтому все CSS свойства в названиях которых есть дефис, нужно преобразовать в другой синтаксис. Для этого мы убираем дефис и пишем первую букву второго слова, заглавной. Такой стиль написания называется camelCase (верблюжий регистр), напоминающий горбы верблюда.


let containerElement = document.querySelector('.container');

containerElement.style.borderColor = "black"; // так правильно borderСolor

Теперь наш обновленный JavaScript сработал. Рамка у заголовка окрасилась в черный цвет.

Изменение стилей через JavaScript

Заключение

Зачем вообще нужно изменять элементы на странице с помощью JavaScript? Не проще ли сразу создать HTML страницу с необходимым CSSкодом? Все дело в том, что JavaScript позволяет реагировать на события, производимые пользователем и менять CSS свойства прямо на ходу. Во взаимодействии с пользователем и заключается вся сила языка JavaScript. Например вы можете создавать формы и проверять, что туда вводит пользователь. Просто создавать HTML страницы и стилизовать их согласно макету заказчика, недостаточно в современной веб-разработке. Вы можете возразить, что для этого есть другие специалисты — JavaScript программисты. Однако в реальном мире, заказчики предпочитают выбирать исполнителей с опцией «все включено», чтобы цепочка исполнителей была, как можно короче. Поэтому изучайте JavaScript на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.

Источник

Просмотров:

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

Adblock
detector