DWWEB.RU
СКРИПТЫ

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

Начнем с того, что немного копнем в теорию - о Setattribute – если уже прочитать название, то

«Set attribute» переводится «Установить атрибут».

Синтаксис element.setAttribute(имяАтрибута, значение); Аргументы
имя Атрибута: строка содержащая имя атрибута, который нужно добавить в элемент.
значение: строка содержащая значение для добавляемого атрибута.
Возвращаемое значение Нет.

Ну и собственно – это все с теорией, теперь давайте прейдём к практике – и это самое интересное…

В прошлый раз мы касались темы onclick

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

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

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

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

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

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

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

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

1.

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

Создадим кнопку «button» при нажатии на кнопку сработает событие «onclick», которое запустит метод «getElementById» и с помощью «setattribute» отправит в ид(demo), (указанный в getElementById), значение в скобках

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

Код:

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

<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 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 который будеи например коротким...

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
setattributedocument setattributesetattribute javascriptsetattribute srcjs setattributesetattribute styleизменение стилей javascriptavascript изменение элементаjavascript изменение атрибутаjavascript событие изменения размера окна

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019