Atributy tagů jako vlastnosti v JavaScriptu

Nyní se naučme získávat atributy tagů. Platí zde následující pravidlo: každý atribut tagu odpovídá stejnojmenné vlastnosti DOM elementu.

Podívejme se na příklad. Předpokládejme, že máme takovýto tag:

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

Získáme odkaz na náš element do proměnné:

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

Vypíšeme hodnoty potřebných atributů:

javascriptconsole.log(elem.id);   // vypíše 'elem'
console.log(elem.type); // vypíše 'text'

A nyní pro příklad změňme hodnotu atributu:

javascriptelem.type = 'submit';

Задание 1

Je dán následující input:

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

Je také dáno tlačítko. Po kliknutí na tlačítko vypište na obrazovku obsah atributu type uvedeného inputu.

Задание 2

Je dán následující input:

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

Je také dáno tlačítko. Po kliknutí na tlačítko zapište do atributu type hodnotu submit.

Задание 3

Předpokládejme, že máte odkaz v podobě tagu a, tlačítko a odstavec. Po kliknutí na tlačítko vypište do odstavce obsah atributu href odkazu.

Задание 4

Předpokládejme, že máte odkaz a tlačítko. Po kliknutí na tlačítko přidejte na konec textu odkazu obsah jeho atributu href v kulatých závorkách.

Задание 5

Předpokládejme, že máte obrázek. Umístěte jej na stránku pomocí tagu img. Předpokládejme, že jsou také dána tlačítko a odstavec. Udělejte tak, aby po kliknutí na tlačítko se do odstavce zapsala cesta k obrázku z jeho atributu src.

Задание 6

Je dán obrázek v tagu img a tlačítko. Po kliknutí na tlačítko zapište do atributu width hodnotu 300.

Задание 7

Je dán obrázek v tagu img a tlačítko. Předpokládejme, že v atributu width je nastavena určitá šířka. Vytvořte tlačítko, po jehož stisknutí se šířka obrázku zvětší 2 krát.

Задание 8

Předpokládejme, že máte dva obrázky. Vytvořte na stránce tag img a dvě tlačítka. Po kliknutí na první tlačítko zapište do atributu src cestu k prvnímu obrázku, a po kliknutí na druhé - cestu k druhému obrázku.