<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Изменение стилей через 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 на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.