<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

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

Также к курсу идёт Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

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

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Изменение CSS классов через JavaScript

Изменение CSS классов через JavaScript

На предыдущем уроке мы разобрали, как можно менять отдельные CSS свойства у элементов при помощи JavaScript. Однако будет ли такое действие эффективным, если понадобится изменить сразу много свойств у объекта. И как следствие, придется написать много строк JavaScript кода.

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


Изменение CSS классов через JavaScript.


//HTML разметка
<div class="container">
    <h1 id="header">Мудрая цитата</h1>
    <p class="text">Самая <span class="green"> важная</span> вещь - уметь наслаждаться <span class="green"> жизнью</span>
и быть <span class="green"> счастливым</span>. Это все, что имеет <span class="green">значение</span>.
    </p>
</div>

//CSS стили
.container {
    width: 400px;
    border: 8px solid plum;
    margin: 20px auto;
}

#header {
    font-size: 24px;
    font-weight: 700;
    color: purple;
    font-family: 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

.text {
    font-size: 18px;
    font-weight: 200;
    font-family: sans-serif;
    text-align: center;
    padding: 10px;
}

.green {
    color:greenyellow;
}

Изменение класса

Все перечисленные свойства для замены находятся в классе text. Создадим новый класс supertext, но с другими значениями.

.supertext {
    font-size: 16px;
    font-weight: 700;
    font-family: Tahoma;
    color:royalblue;
    text-align: center;
    padding: 10px;
}

Затем, чтобы присвоить параграфу новый класс, мы должны найти объект с классом text и через свойство className присвоить ему новый класс.

//JavaScript
let headerElement = document.querySelector('.text');
headerElement.className = "supertext";

Теперь в HTML разметке у тега p появился новый класс supertext, вместо старого. И мы видим, как изменился внешний вид текста.

<p class="supertext">..</p>

Изменение CSS классов через JavaScript.

Добавление класса

Как быть, если мы хотим не заменять класс, а добавить новый класс к существующему. В этом случае, надо использовать оператор сложения с присваиванием (+=). Мы создали новый класс underline с одним единственным свойством подчеркивания.

.underline {
    text-decoration: underline;
}

В цикле for JavaScript пройдется по всем тегам span с классом green и добавит к ним класс underline (с пробелом спереди). Так мы сохраним акцентные слова зелеными и добавим им подчеркивание. Обратите внимание, что для поиска нескольких элементов, мы использовали метод querySelectorAll.

let greenElement = document.querySelectorAll('.green');
for (let i = 0; i < greenElement.length; i++) {
    greenElement[i].className += " underline";
}

В HTML разметке произошли динамические изменения: теперь у тега span, есть два класса. Если бы мы не оставили перед underline пробел, то оба класса слились бы в одно слово. Тогда мы получили бы совсем другой результат.

<span class="green underline">..</span>
Изменение CSS классов через JavaScript.

Альтернативный способ добавления класса

Есть еще один способ добавить класс, через свойство classList.

headerElement.classList.add = ("supertext");

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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