ახლა უკვე იცი, როგორ უნდა შეცვალო
ელემენტის კონტენტი
და მისი ატრიბუტების მნიშვნელობები.
კიდევ რა დარჩა?
რა ვქნათ, თუ სტილის შეცვლა გვინდა?
წესით, ამას 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"`.
გავიმეორებ, რომ დიდი ასოთი ვწერთ იმიტომ,
რომ მანამდე ეს ორი სიტყვა დეფისით ეწერა.
და ახლა ჩვენი ჰედერი ჰგავს კატასა და
ჰელოუინს ერთდროულად.