<MyRusakov.ru />

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

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

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Манипуляции с элементами в JS

Манипуляции с элементами в JS

Как вы думаете, к какому типу данных относятся элементы на HTML страницах? Это все объекты и на этом уроке мы будем учиться, с ними работать. В предыдущих статьях вы узнали, как получать элементы на странице по селектору, по тегу и классу.

Изменить стиль элемента в JS

На HTML странице находится красный квадрат. Как изменить CSS свойства у элемента через JS?

<div class="red"></div>

.red {
    width: 150px;
    height: 150px;
    background-color: red;
}

Сначала получим квадрат по селектору и для дальнейших манипуляций, поместим наш объект в переменную. Убедимся через консоль, что перед нами объект.

let red = document.querySelector('.red');
    console.log(typeof(red)); // object

Теперь поменяем красный цвет квадрата, на черный.

Добавим к переменной red слово style и нужное свойство. В JS свойства нужно прописывать в формате camelCase, а нет так, как в CSS. Просто начинайте писать свойство, а редактор кода вам сам подскажет правильный формат. После оператора присваивания (=), указываем новый цвет.

red.style.backgroundColor = 'black';

Мы, только-что изменили цвет у элемента, с помощью JS. Давайте немного усложним задачу: разместим три круга и изменим стили только у второго круга - превратим его в квадрат.

<div></div>
<div></div>
<div></div>

div {
    width: 50px;
    height: 50px;
    background-color: green;
    display: block;
    margin-top: 10px;
    border-radius: 50%;
}

Идущие подряд три блока, образуют псевдомассив, где каждый элемент пронумерован под своим порядковым номером. Мы это хорошо видим на картинке ниже.

Манипуляции с элементами в JS.

Вся это HTML коллекция попадает по имени тега в переменную circle. Но как нам вытащить оттуда только второй круг?

let circle = document.getElementsByTagName('div');
    console.log(circle);

Так и обращаемся к нему по его порядковому номеру (индексу): Нужно изменить у второго элемента, свойство borderRadius. JS бесцеремонно заходит в файл стилей и меняет радиус у рамки, с круглой на квадратную.

circle[1].style.borderRadius = '0%';

Массовая замена стилей

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

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

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

for (let i=0; i < circle.length; i++){
    circle[i].style.backgroundColor = 'pink';
}

Добавить текст на страницу


p.innerHTML = 'Добавим текст в параграф.'

Добавить HTML код на страницу


ul.innerHTML = '<li>Добавили пункт в список</li>'

Динамическое создание элементов в JS

Элементы сайта можно не только изменять, но и создавать на лету, не заходя в HTML документ. Метод createElement() создаст парный тег <span></span>, который мы присвоим переменной.

let span = document.createElement('span');

Теги можно стилизовать или менять им стили путем добавления к элементу класса модификатора, при помощи метода classList. Добавим класс big тегу span.

span.classList.add('big'); console.log(span); <span class="big"></span> // содержимое переменной

Созданный элемент с классом надо вставить в HTML страницу, в какое-то определенное место. Вставим новый элемент в конец родительского тега section.

<section>
    <p></p>
</section>

let section = document.querySelector('section');
section.appendChild(span);

В секцию добавился потомок.

<section>
    <p></p>
    <span></span>
</section>

Метод removeChild удалит элемент.

section.removeChild(span);

Родителем для section, будет служить тег body.

Хотите узнать, как на лету создаются мощные приложения на React? Закажите прямо сейчас видеокурс "React JS, Redux, ES2015 с Нуля до Гуру"

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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