Атрибути тегова као својства у JavaScript-у

Хајде сада да научимо како да дођемо до атрибута тегова. Овде важи следеће правило: сваком атрибуту тега одговара истоимено својство DOM елемента.

Погледајмо на примеру. Нека имамо овакав тег:

html<input id="elem" type="text">

Добијмо референцу на наш елемент у променљиву:

javascriptlet elem = document.querySelector('#elem');

Испишимо вредности потребних атрибута:

javascriptconsole.log(elem.id);   // исписаће 'elem'
console.log(elem.type); // исписаће 'text'

А сада за пример променимо вредност атрибута:

javascriptelem.type = 'submit';

Задание 1

Дат је следећи унос (input):

html<input id="elem" type="email">

Дато је такође дугме. При клику на дугме испишите на екран садржај атрибута type горе наведеног уноса.

Задание 2

Дат је следећи унос (input):

html<input id="elem" type="email">

Дато је такође дугме. При клику на дугме упишите у атрибут type вредност submit.

Задание 3

Нека имате линк у виду тега a, дугме и пасус. При клику на дугме испишите у пасус садржај атрибута href линка.

Задание 4

Нека имате линк и дугме. При клику на дугме додајте на крај текста линка садржај његовог атрибута href у заобљеним заградама.

Задание 5

Нека имате слику. Поставите је на страницу помоћу тега img. Нека су такође дати дугме и пасус. Направите тако да при клику на дугме у пасус буде уписан пут до слике из њеног атрибута src.

Задание 6

Дата је слика у тегу img и дугме. При клику на дугме у атрибут width упишите вредност 300.

Задание 7

Дата је слика у тегу img и дугме. Нека је у атрибуту width задата нека ширина. Направите дугме, при клику на које ће се ширина слике повећати 2 пута.

Задание 8

Нека имате две слике. Направите на страници тег img и два дугмета. При клику на прво дугме упишите у атрибут src пут до прве слике, а при клику на друго - пут до друге слике.