JS - METHOD

Здесь будет то, что будет измениться после нажатия по кнопке.

2.

И второй пример, который мне хочется вам показать - это изменение заднего фона дива:

Код:

<button onclick="getElementById('demo_1').setAttribute('style', 'background-color: red;');">Изменить цвет</button> 

<div id="demo_1" style="background-color:#d5d5e7">Здесь будет задний фон, который изменится после нажатия на кнопку</div>

Результат:

Здесь будет задний фон, который изменится после нажатия на кнопку

Изменить размер блока с помощью setAttribute

3.

Следующим примером давайте изменим и размер блока и его цвет. Размер блока изменим с 30% на 70% при нажатии!

<button onclick="getElementById('demo_2').setAttribute('style', 'background-color:red; width: 70%;');">Изменить размер</button>

<div id="demo_2" style="background-color:#d5d5e7; width: 30%;">Здесь будет задний фон, который изменится после нажатия на кнопку</div>

Здесь будет задний фон, который изменится после нажатия на кнопку

Двойное изменение с помощью setAttribute.

3.

Это были довольно простые примеры, и они предназначены для понимания процесса работы функции setAttribute.

Ну и немного посложнее, к примеру нам нужно при первом нажатии показать элемент, а при втором нажатии скрыть элемент

Что будет происходить!? В каждом onclick поставим два действия 1.Передадим один атрибут в первый блок, 2.действием спрячем саму кнопку по которой нажали . При этом откроется вторая кнопка, на которую будет навешана то же самое только в обратном порядке.

Код:

<div id="demo_3_1" style="display: block; color: blue;">

Здесь текст demo_3_1 который будеи например коротким...

<button onclick="getElementById('demo_3_1').setAttribute('style', 'display: none;');getElementById('demo_3_2').setAttribute('style', 'display: block; color: red;')">Показать</button>

<div id="demo_3_2" style="display: none; "> 

Здесь текст demo_3_2 - здесь этот же текст только с продолжениями... например...

<button onclick="getElementById('demo_3_2').setAttribute('style', 'display: none;');getElementById('demo_3_1').setAttribute('style', 'display: block; color: blue;')">Скрыть</button></div>

</div>

Результат:

Здесь текст demo_3_1 который будеи например коротким...

Написать комментарий!

Поддержка граватар

Прокомментировать
Подписаться на комментарии с этой страницы.




Друзья!
Задумывался проект, как сайт, который будет помогать новичкам разбираться в премудростях сайтостроения!
Проект держится на чистом энтузиазме и на не подсчитанном потраченном времени!
И не измерить никакими деньгами!

Мне очень неудобно, но к сожалению ... собранных денег с рекламы - катастрофически не хватает на оплату домена и хостинга!
И в 2018 году, даже стоял вопрос о закрытии проекта DwWeb.Ru из-за его нерентабельности!

Поэтому!
Мы просим у вас помощи! Если вы считаете, что проект должен существовать, то можете поддержать нас, здесь на сайте – ниже идет кнопка! Либо же на отельной странице для помощи проекту DwWeb.Ru.

Благодарю всех, кто помог нашему проекту! Вас обязательно будет ждать удача!

Последние сообщения

Ipsum
Ipsum
Ipsum


Ешё:
ПОСЛЕДНИЕ КОММЕНТАРИИ
Паула : 2018/04/13 - 20:34
IpsumМне вообще интересно! И тут я тоже немного пытаюсь разбираться в коде и видела ваши предыдущие версии - но подробнее ...
Марат : 2018/04/13 - 20:40
IpsumСпасибо за сообщение!
Вы тот человек. кто первый протестировал данную систему комментирования.
Спер!? - подробнее ...



TAGS