-
ახლა უკვე იცი, როგორ უნდა შეცვალო
ელემენტის კონტენტი
-
და მისი ატრიბუტების მნიშვნელობები.
-
კიდევ რა დარჩა?
რა ვქნათ, თუ სტილის შეცვლა გვინდა?
-
წესით, ამას CSS-ში ვაკეთებთ, მაგრამ
ხანდახან
-
გვირჩევნია ამისთვის JavaScript გამოყენება,
მაგალითად, თუ სტილების დროში შეცვლა გვინდა
-
ან დაკლიკვის მერე შეცვლა.. მალე გაჩვენებთ,
როგორ უნდა გააკეთოთ ეს, გპირდებით.
-
შევცვალთ ამ სათაურის სტილი.
-
თუ ამას CSS-ში გავაკეთებდით,
გამოვიდოდა ასე:
-
`#heading`, არჩეული ID-ით,
და მერე `color: orange`.
-
აი, კატასავით ნარინჯისფერია.
-
ახლა გავაკეთოთ იგივე JavaScript-ში.
-
ჯერ ვიპოვოთ ჰედერის ელემენტი,
რომელიც აქ გვაქვს
-
შემდეგ ვნახოთ მისი სტილის ატრიბუთი
-
შემდეგ ის თვისება, რომელიც გვაინტერესებს,
ანუ ფერი
-
და მივანიჭოთ მას ახალი მნიშვნელობა.
-
წავშალოთ თვისება CSS-ში და ვნახოთ,
თუ გამოგვივიდა. გამოგვსვლია.
-
ახლა უყურე, აქ გვაქვს ორი წერტილი,
იმიტომ რომ
-
რეალურად ორ ობიექტს შევეხეთ. ერთია ელემენტი
და მეორეა სტილი,
-
რომელიც ელემენტის ყველა სტილს ცალკე
თვისებებად ინახავს.
-
დავუშვათ, გვინდა ფონის და ჰედერის
ფერის შეცვლაც.
-
CSS-ში ეს იქნებოდა
background-color: black;
-
ვნახოთ, რა იქნება JavaScript-ში:
-
headingEl.style.background-color
= "black";
-
ოჰ-ოჰ, რაღაც შეცდომაა.
არასწორად ჩავწერეთ.
-
თვისებების სახელებში არ შეიძლება იყოს
დეფისები.
-
ამიტომ ეს CSS ფორმის სახელი უნდა შევცვალოთ
JavaScript-ის შესაბამისი ფორმით
-
ანუ წავშალოთ დეფისი და დავწეროთ
მეორე სიტყვა დიდი ასოთი.
-
შევამოწმოთ, წინა თვისების წაშლით -
და კი, გამოგვივიდა, კვლავ შავია.
-
ახლა გავასწოროთ ჰედერი ცენტრზე.
-
ამისთვის დავამატოთ აქ კიდევ ერთი ხაზი.
-
`headingEl.style.textAlign`--
დავწეროთ დიდი ასოთი -- `= "center"`.
-
გავიმეორებ, რომ დიდი ასოთი ვწერთ იმიტომ,
რომ მანამდე ეს ორი სიტყვა დეფისით ეწერა.
-
და ახლა ჩვენი ჰედერი ჰგავს კატასა და
ჰელოუინს ერთდროულად.
