თეგების ატრიბუტები როგორც თვისებები JavaScript-ში

ახლა მოდით ვისწავლოთ თეგების ატრიბუტების მიღება. აქ მოქმედებს შემდეგი წესი: თითოეულ თეგის ატრიბუტს შეესაბამება ამავე სახელის DOM ელემენტის თვისება.

მოდით შევხედოთ მაგალითს. დავუშვათ, რომ გვაქვს ასეთი თეგი:

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

მივიღოთ ბმული ჩვენს ელემენტზე ცვლადში:

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

გამოვიტანოთ ჩვენთვის საჭირო ატრიბუტების მნიშვნელობები:

console.log(elem.id);   // გამოიტანს 'elem'
console.log(elem.type); // გამოიტანს 'text'

ახლა კი მაგალითისთვის შევცვალოთ ატრიბუტის მნიშვნელობა:

elem.type = 'submit';

მოცემულია შემდეგი ინფუთი:

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

მოცემულია ასევე ღილაკი. ღილაკზე დაჭერისას გამოიტანეთ ეკრანზე ზემოთ მითითებული ინფუთის type ატრიბუტის შიგთავსი.

მოცემულია შემდეგი ინფუთი:

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

მოცემულია ასევე ღილაკი. ღილაკზე დაჭერისას ჩაწერეთ type ატრიბუტში მნიშვნელობა submit.

დაე, გქონდეთ ბმული a თეგის სახით, ღილაკი და აბზაცი. ღილაკზე დაჭერისას გამოიტანეთ აბზაცში ბმულის href ატრიბუტის შიგთავსი.

დაე, გქონდეთ ბმული და ღილაკი. ღილაკზე დაჭერისას დაამატეთ ბმულის ტექსტის ბოლოს მისი href ატრიბუტის შიგთავსი მრგვალ ფრჩხილებში.

დაე, გქონდეთ სურათი. მოათავსეთ იგი გვერდზე img თეგის საშუალებით. დაე, მოცემულია ასევე ღილაკი და აბზაცი. გახადეთ ისე, რომ ღილაკზე დაწკაპუნებისას აბზაცში ჩაიწეროს სურათის გზა მისი src ატრიბუტიდან.

მოცემულია სურათი img თეგში და ღილაკი. ღილაკზე დაჭერისას width ატრიბუტში ჩაწერეთ მნიშვნელობა 300.

მოცემულია სურათი img თეგში და ღილაკი. დაე, width ატრიბუტში მითითებულია გარკვეული სიგანე. გააკეთეთ ღილაკი, რომლის დაჭერისას სურათის სიგანე გაიზრდება 2-ჯერ.

დაე, გქონდეთ ორი სურათი. გვერდზე გააკეთეთ img თეგი და ორი ღილაკი. პირველ ღილაკზე დაჭერისას ჩაწერეთ ატრიბუტში src გზა პირველ სურათამდე, ხოლო მეორეზე დაჭერისას - გზა მეორე სურათამდე.