Атрибути на тагови како својства во 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

Даден е следниов инпут:

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

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

Задание 2

Даден е следниов инпут:

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 патот до првата слика, а при клик на второто - патот до втората слика.