Code.ge Blog

რამდენიმე დღის წინ ჩემს მეგობართან საუბრისას(Otory) მან დამისვა ასეთი შეკითხვა შეიძლებოდა თუ არა რომ HTML ელემენტისთვის რაიმე ეფექტური გზით მოგვეშორებინა CSS კლასი. ცნობილია რომ ერთ ელემენტს შეიძლება გააჩნდეს რამდენიმე CSS კლასი ერთდროულად:
[html]

[/html]

ასევე შესაძლებელია რომ ელემენტს JavaScript – ის მეშვეობით დავამატოთ ან მივანიჭოთ სხვა CSS კლასი. თუმცა რომელიმე ერთი კონკრეტული კლასის მოცილება ელემენტისთვის თუ მას გააჩნია რამდენიმე კლასი გარკვეულ სირთულესთან არის დაკავშირებული, რადგან არ არსებობს რაიმე წინასწარ შემუშავებული მეთოდი ამ ამოცანის გადასაწყვეტად.

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

ცალკეულ და ერთეულ შემთხვევაში ამ მიზნის მიღწევა შეიძლება მარტივად თუმცა გარკვეული კოდირების საშუალებით, მაგრამ მსჯელობის შედეგად მივიღეთ ასეთი პატარა მაგრამ სასარგებლო JavaScript კლასი რომლის გამოყენება შეიძლება ნებისმიერ შემთხვევაში და არ არის დამოკიდებული მხოლოდ ამ მოცემულ მაგალითზე:

[javascript]var Util = {
style: {
addClass: function(element, className) {
var classNames = element.className.split(‘ ‘);
classNames.push(className);
element.className = classNames.join(‘ ‘);
},
setClass: function(element, className) {
element.className = className;
},
removeClass: function(element, className) {
var classNames = element.className.split(‘ ‘);
for (var i = 0; i < classNames.length; i++) {
if (classNames[i] == className) {
classNames.splice(i, 1);
break;
}
}
element.className = classNames.join(' ');
}
}
};[/javascript]

როგორც კოდიდან ჩანს, style კლასს გააჩნია სულ სამი მეთოდი და ყოველი მათგანი პარამეტრად ღებულობს HTML ელემენტს და CSS კლასის სახელს. მეთოდები აღწერას არ საჭიროებენ რადგან მათი სახელებიდან ნათლად ჩანს მათი დანიშნულება.

ამ კლასის გამოყენების მაგალითი ნაჩვენებია ქვემოთ (ყურადღება მიაქციეთ რომ div ელემენტს თავიდანვე მინიჭებული აქვს ორი CSS კლასი):

CSS კოდი რომელიც გამოყენებული იყო მაგალითისთვის:
[css]
div.initial {
border: 2px solid red;
background: silver;
}