CSS კლასების შეცვლა

ბოლო ტუტორიალში მე გაჩვენეთ, როგორ
განსაზღვროთ სტილები JavaScript-ში

თუ ბევრ სხვადასხვა სტილს გამოიყენებ
JavaScript-ში, ბოლოს

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

და ამან შეიძლება სერიოზულად არიოს შენი
JavaScript.

მაგრამ, შეგვიძლია გავაკეთოთ ასე:

შეგვიძლია შევქმნათ CSS კლასი

და CSS წესი ამ კლასისთვის,
ჩვენთვის სასურველი სტილით.

შემდეგ კი დინამიურად დავამატოთ ამ კლასის
სახელი JavaScript-ში.

დავიწყოთ თეგით ``.

შევქმნათ კლასი .catcolors და CSS წესი
ამ კლასისთვის.

ფერები იქნება შემდეგი: color: orange`,
and `background-color: black`.

ახლა თუ გვინდა ეს მივმართოთ ელემენტს
"heading" (ჰედერს)

ჩავწეროთ `headingEl.className = "catcolors";

ახლა შეგვიძლია წავშალოთ ფერების

განსაზღვრებები JavaScript-იდან.

და

გამოვიდა!

ამჩნევთ რაღაც უცნაურობას?

HTML ატრიბუტი კლასების სახელებისთვის
არის უბრალოდ class

ეს რომ HTML-ში გამეკეთებინა, იქნებოდა
class="catcolors"

მაგრამ როცა JavaScript-ში ვმუშაობთ,
უნდა გამოვიყენოთ .className

რაც ჩვენთვის ცოტა უჩვეულოა.

ეს ასეა იმიტომ, რომ class JavaScript-ში არის
ფუქნციური სიტყვა,

რომელსაცა ამ ენაში განსაკუთრებული
მნიშვნელობა აქვს.

ამის გამო, ბრაუზერებმა გადაწყვიტეს
გამოიყენონ className , როცა

HTML კლასის ატრიბუტს უნდა მიმართონ.

დაიმახსოვრე, თუ გინდა განსაზღვრო ელემენტის
კლასის ატრიბუტი,

წერ .className უდრის ....

ახლა დაუკავშირე ეს ცხოველის
ყოველ სახელს;

ეს შეიძლება ჩავსვათ ციკლში.

nameEls[i].className = "catColors";

ასე დავამატებთ ახალ კლასს და სახელს,
მაგრამ წავშლით ყველა კლასს,

რაც მანამდე იყო - ეს მოხდება
იმის გამო, რომ გავატოლეთ.

ასე რომ, თუ აქ მანამდე რამე კლასები იყო
ახლა აღარ არის.

ვიცით, რომ აქ ადრე იყო კლასები,
რომლებიც უდრიდა ცხოველებს,

ახლა კი catColors გვაქვს.

ახლა ამ კლასის ატრიბუტს უნდა დავუმატოთ
კლასის ახალი სახელი.

ამის გაკეთება შეგვიძლია ასე:
+ = catColors

ესეც ასე.

ეს საკმაოდ უსაფრთხო გზაა,

იმიტომ რომ წინა კლასს უმატებს ახალს.

ახალ ბრაუზერებში კიდევ შეიძლება

classList თვისების გამოყენება.

ვაკეთებთ ასე:
nameEls[i].classList.add("catcolors");

ეს გაცილებით უფრო კარგია, მაგრამ
ყველგან არ მუშაობს.

თუ ამის გამოყენება გინდა, უნდა გადახვიდე
გვერდზე caniuse.com

და დარწმუნდე, რომ ის მუშაობს
ყველა ბრაუზერში,

სადაც გინდა, რომ შენი გვერდი გაიხსნას.

შენთვის ეს ფუნქცია კი არის კარგი, მაგრამ
კარგი სულაც არაა თუ გვერდი არ ჩაიტვირთა

იმის გამო, რომ ისეთი ფუნქცია გამოიყენე,
რომლის შესახებაც ბრაუზერს ჯერ არაფერი არ სმენია.

ეს ისე, ზოგადად.

მე მაგალითად მირჩევნია, რომ ჩემი
გვერდი ყველა ბრაუზერში იხსნებოდეს.

საკითხს რომ დავუბრუნდეთ, ხანდახან
კლასების სახელების მინიჭების მაგივრად

გვირჩევნია ცალკე სტილების შეცვლა.

მოკლედ, გახსოვდეს, რომ ორივე ეს ხერხი
არსებობს და შეგიძლია გამოიყენო.

აირჩიე საუკეთესო სიტუაციიდან გამომდინარე.