Полюбите код! И он полюбит Вас!

Последние комментарии:

Марат : Андрей - там может быть столько нюансов... А вообще, мы далее

2018-03-11 13:23:36



Андрей : Попробовал поставить версию 1.2, но что-то не работает. далее

2018-03-11 13:03:52



Марат : Для этого и делали! Рад, что помог! Приходите ещё! далее

2018-02-16 20:31:51



Виктор : Спасибо! Очень полезная статья. Нужно было очистить всю базу данных, далее

2018-02-16 20:30:13



Евгений : Спасибо за перевод sublime!!!! далее

2018-02-15 16:42:05



Это интересно:

Рейтинги страниц.

Вы здесь - Главная - Javascript - onclick

javascript изменение атрибута

Изменение свойств блока, атрибута.

Сегодня будем изменять свойства объекта с помощью функции setAttribute. И конечно будем иллюстрировать данные изменения с помощью примеров.

Давайте с самого начала запустим самый главный постулат! Если у блока есть атрибут, то его всегда можно изменить!

Что такое атрибут!?

Все, что есть внутри любого объекта, к примеру, размерность - высота, ширина, цвет, видимость и т.д.

Ну вот давайте и с цвета будем начинать наше исследование функции setAttribute.

Естественно, что нужно какое-то действие из вне. С помощью onclick мы будем передавать новые свойства объекту.

Изменить цвет с помощью setAttribute

1.

Мы должны написать некий код, чтобы это действие продемонстрировать.

Код:

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

<div id="demo" style="color: blue;" >Здесь будет то, что будет измениться после нажатия по кнопке.</div>

Нажимте по кнопке, чтобы изменить цвет внутри блока.

Результат:

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

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>

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

Результат:

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

Понравилась статья!? Не стесняйся – поделись ссылкой!

И!

Пожалуйста! Если вам не трудно - прокомментируйте то, что вы прочитали! Вам понравилось, или не понравилось! Напишите, какие мысли возникли у вас, и это бесплатно для вас, но очень ценно для нас!!! Всё, что вы здесь видите - это написано для вас! Никаким другим образом мы не можем понять вашу реакцию. Может, что-то стоит добавить или наоборот убрать. Либо, что-то стоило изменить...

P.S.

25 октября 2017

Мы запустили подписку на новости по емайлу, как только выходит новая статья, то будет отправлено сообщение на почту, что вышла новая статья!

Почему стоит подписаться на наши новости!?

Расскажу историю, вчера искал ответ на один из вопросов (конечно, я могу и сам написать, но чаще всего, вначале, ищу в интернете, может есть готовое решение…) и было множество вариантов, которые были описаны, но ни одного, с примерами! И мало того, что они предлагают решения, которые непонятно как реализовывать, особенно новичкам, у которых больше вопросов, чем ответов. Так они еще и не работают!

У нас же, на сайте – только рабочие проверенные скрипты! Полностью с описанием и с примерами! И реализовать может человек с нулевыми знаниями!

Мы есть здесь:

Проголосовать за статью!
  С 24 сентября мы запускаем новый скрипт в тестовом режиме (только свои скрипты)
  Вы можете проголосовать за понравившуюся статью.

  Еще никто не проголосовал
    


Просмотров 469

Друзья!

Для того, чтобы вы получили бесплатную информацию, мы потратили и время и деньги!

Мы существуем от кликов по рекламе!

Если вы не нашли подходящего блока объявлений, то вы еще можете помочь проекту!

Не стесняйтесь!

Даже самая маленькая сумма будет употреблена на продвижение и улучшение проекта!

Заранее благодарим Вас!

Оставить комментарий:

Для отображения аватара после отправки сообщения, необходимо быть зарегистрированным в Граватаре.



Комментарии

Комментариев пока нет.

* Обязательные поля
(Не публикуется)
 
Жирный Курсив Подчеркнутый Перечеркнутый Степень Индекс Код PHP Код Кавычки Вставить линию Вставить маркированный список Вставить нумерованный список Вставить ссылку Вставить e-mail Вставить изображение Вставить видео
 
Улыбка Печаль Удивление Смех Злость Язык Возмущение Ухмылка Подмигнуть Испуг Круто Скука Смущение Несерьёзно Шокирован
 
5000
Напишите цифрами четыреста семьдесят два.
 
(введите ответ)
 
Уведомлять о новых коментариях по почте.
 

Оставить комментарии через вконтакте

Все дела сделаны!

Теперь можно и поиграть!

Понравилась игра!? Растфнуть на весь экран

Улучши поведенческий фактор на своём сайте.

Забери код здесь

Пишем полную инструкцию о пользовании ruweb.net + DirectAdmin

RuWeb.net - гибкий хостинг
Индекс цитирования