ელემენტების სტილიზაცია JavaScript-ზე
დავუშვათ, გვაქვს რამდენიმე აბზაცი:
<p>text1</p>
<p>text2</p>
<p>text3</p>
მოდით, გადავუაროთ ამ აბზაცებს ციკლით და თითოეული აბზაცის ბოლოს
დავამატოთ ბმული, რომელზე დაწკაპუნებისას
აბზაცის ტექსტს დაემატება
გარკვეული სტილიზაცია. მაგალითად, აბზაცის ტექსტი
გახდება გადახაზული (ამას აკეთებს
CSS თვისება text-decoration).
მოდით, განვიხილოთ ასეთი ამოცანის ორი ნიუანსი.
პირველ რიგში, როგორც წინა გაკვეთილებზეც იყო განხილული, არ უნდა შევცვალოთ აბზაცის სტილები უშუალოდ JavaScript-ის მეშვეობით - ბევრად უფრო მოსახერხებელი იქნება რაიმე CSS კლასების დამატება.
მეორე რიგში, ასეთი ამოცანის განხორციელებისას თქვენ ელოდებათ გარკვეული სიურპრიზი. მისი არსის გასაგებად, მოდით შევხედოთ აბზაცების HTML კოდს ბმულების დამატების შემდეგ:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
ახლა წარმოვიდგინოთ, რომ ბმულზე დაწკაპუნებისას აბზაცის ტექსტი გადაიხაზება. თუმცა, ბმული ამ შემთხვევაში ასევე არის აბზაცის ნაწილი და ისიც გადაიხაზება! სავარაუდოდ, ასეთი ეფექტი არ გვჭირდება. ჩვენ გვინდა, რომ ტექსტი გადაიხაზოს, მაგრამ ბმული - არა.
პრობლემის გადასაჭრელად საჭიროა უბრალოდ შევახვიოთ
აბზაცის ტექსტი span თეგში, აი ასე:
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
მოცემულია შემდეგი HTML კოდი:
<p>text1</p>
<p>text2</p>
<p>text3</p>
დაამატეთ თითოეული აბზაცის ბოლოს ბმული, რომელზე დაწკაპუნებისას აბზაცის ტექსტი გადაიხაზება (და ბმული - არა).
შეცვალეთ წინა ამოცანა ისე, რომ ბმულზე დაწკაპუნების შემდეგ ეს ბმული წაიშალოს აბზაციდან (და აბზაცის ტექსტი გახდეს გადახაზული).
მოცემულია გარკვეული HTML ცხრილი. დაამატეთ ამ ცხრილში კიდევ ერთი სვეტი ბმულით. ამ ბმულზე დაწკაპუნებისას სტრიქონი, რომელშიც ეს ბმულია, უნდა გახდეს მწვანე ფონის.
შეცვალეთ წინა ამოცანა ისე, რომ ბმულზე პირველი დაწკაპუნება შეღებავდეს სტრიქონს მწვანე ფონზე, ხოლო მეორე დაწკაპუნება გააუქმებდეს ამ მოქმედებას.
