Atribūti kā īpašības JavaScript

Tagad iemācīsimies iegūt elementu atribūtus. Šeit darbojas šāds noteikums: katrs elementa atribūts atbilst tāda paša nosaukuma īpašībai DOM elementā.

Apskatīsim piemērā. Pieņemsim, ka mums ir šāds elements:

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

Iegūsim atsauci uz mūsu elementu mainīgajā:

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

Izvadīsim vajadzīgo atribūtu vērtības:

javascriptconsole.log(elem.id);   // izvadīs 'elem'
console.log(elem.type); // izvadīs 'text'

Un tagad piemēram mainīsim atribūta vērtību:

javascriptelem.type = 'submit';

Задание 1

Dots šāds ievades lauks:

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

Dota arī poga. Noklikšķinot uz pogas, izvadiet uz ekrāna saturu no atribūta type norādītajā ievades laukā.

Задание 2

Dots šāds ievades lauks:

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

Dota arī poga. Noklikšķinot uz pogas, ierakstiet atribūtā type vērtību submit.

Задание 3

Pieņemsim, ka jums ir saite kā a elements, poga un rindkopa. Noklikšķinot uz pogas, izvadiet rindkopā saturu no saites atribūta href.

Задание 4

Pieņemsim, ka jums ir saite un poga. Noklikšķinot uz pogas, pievienojiet saites teksta beigās tās atribūta href saturu apaļās iekavās.

Задание 5

Pieņemsim, ka jums ir attēls. Novietojiet to lapā, izmantojot img elementu. Pieņemsim, ka ir dota arī poga un rindkopa. Izveidojiet tā, lai, noklikšķinot uz pogas, rindkopā ierakstītos ceļš uz attēlu no tā atribūta src.

Задание 6

Dots attēls img elementā un poga. Noklikšķinot uz pogas, atribūtā width ierakstiet vērtību 300.

Задание 7

Dots attēls img elementā un poga. Pieņemsim, ka atribūtā width ir iestatīts noteikts platums. Izveidojiet pogu, noklikšķinot uz kuras attēla platums palielināsies 2 reizes.

Задание 8

Pieņemsim, ka jums ir divi attēli. Izveidojiet lapā img elementu un divas pogas. Noklikšķinot uz pirmās pogas, ierakstiet atribūtā src ceļu uz pirmo attēlu, bet noklikšķinot uz otrās - ceļu uz otro attēlu.