<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):

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