«
»

ელემენტის სტილებთან მუშაობა – ნაწილი 1

Feb 23 2007

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

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

1
2
3
4
5
function elementOnMove(element) {
    element.style.display = "block";
    element.style.border = "2px solid red";
    element.style.width = element.offsetWidth;
}

ამ კოდში განსაკუთრებული არაფერი არ ხდება, მხოლოდ მისი სტილის გარკვეული ატრიბუტების ცვლა ხდება დინამიურად. მაგრამ როგორ უნდა მოვიქცეთ ისეთ შემთხვევაში თუ ამ ოპერაციის დასრულების შემდეგ გვინდა რომ ელემენტს დაუბურნდეს საწყისი სტილი?

თავისთავად იბადება შეკითხვა, რატომ უნდა ვუცვალოთ ელემენტს სტილები ამ გზით თუ შეგვიძლია რომ წინასწარ განვსაზღვროთ CSS კლასები ყველა შესაძლო მდგომარეობისათვის და მონაცვლეობით მივანიჭოთ ესა თუ ის კლასი?

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

1
2
3
4
5
6
7
8
9
10
11
12
var oldStyle = null;

function elementOnMove(element) {
    oldStyle = element.style.cssText;
    element.style.display = "block";
    element.style.border = "2px solid red";
    element.style.width = element.offsetWidth;
}

function elementOnStop(element) {
    element.style.cssText = oldStyle;
}
  • მაგალითში შევქმენით ახალი გლობალური oldStyle ცვლადი რომელზე წვდომაც პირდაპირ შეგვიძლია ფუნქციებიდან (PHP-სგან განსხვავებით JavaScript-ში არავითარი დამატებიტი კონსტრუქციების გამოყენება არ არის საჭირო გლობალურ ცვლადებთან სამუშაოდ).
  • elementOnMove ფუნქციაში ამ ცვლადს მივანიჭეთ ელემენტის უკვე არსებული CSS ტექსტი (თუ ცარიელი არ არის მას აქვს მსგავსი სახე: font: arial; font-size: 12px; background-color: blue და ა.შ.)
  • ელემენტს შევუცვალეთ სტილები საჭიროების მიხედვით.

როდესაც ეს (და თუ საჭიროა სხვა ოპერაციები) დასრულდება და გამოძახებულ იქნება elementOnStop ფუნქცია, იგი უბრალოდ დაუბრუნებს ელემენტს მის საწყის სტილს რომელიც ინახება oldStyle ცვლადში.

ერთი შეხედვით ყველაფერი მარტივად და კარგად არის მაგრამ თუ წარმოვიდგენთ ისეთ სურათს რომ ერთდროულად ბევრი ელემენტისთვის გვჭირდება მისი ძველი სტილის შენახვა ეს მაგალითი გამოუსადეგარი გახდება, სულ მცირე მასივი იქნება საჭირო რომელშიც სხვადასხვა ელემენტების სტილებს შევინახავთ… მაგრამ აქ კიდევ ერთი შეკითხვა იბადება, ამ მასივთან როგორ ვიმუშავოთ? რის მიხედვით შევინახოთ მასში ელემენტის სტილი და შემდეგ როგორ უნდა მივანიჭოთ ეს სტილი ისევ ელემენტს?

ჩემის აზრით ეს მიდგომაც არ არის გამართლებული და ყოვლად არაეფექტურია. ნაცვლად ცვლადებისა და მასივებისა შესაძლებელია სხვა უფრო მარტივი და ეფექტური გზის გამოყენება რომელიც ნაჩვენებია შემდეგ მაგალითში:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var Util = {
    style: {
        saveState: function(element) {
            if (element) {
                element.oldCssText = element.style.cssText;
            }
        }, restoreState: function(element) {
            if (element) {
                element.style.cssText = element.oldCssText;
                element.oldCssText = null;
            }
        }
    }
}

//usage
function elementOnMove(element) {
    Util.style.saveState(element);
    element.style.display = "block";
    element.style.border = "2px solid red";
    element.style.width = element.offsetWidth;
}

function elementOnStop(element) {
    Util.style.restoreState(element);
}

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

ძალიან მარტივი თუმცა ჩემთვის ძალიან გამოსადეგი მიგნება აღმოჩნდა მოცემული მაგალითი და საკმაოდ ინტენსიურად ვიყენებ ჩემს პროექტებში სადაც JavaScript-ს საკმაოდ დიდი ადგილი უკავია.

ტეგები: ,

One Response to “ელემენტის სტილებთან მუშაობა – ნაწილი 1”

  1. გიორგი says:
    July 9, 2008 at 1:25 pm

    IE6 – რომ საზიზღრობაა ორი აზრი არ არსებობს მაგაზე.
    ოქნებ ვინმემ იცოდეს როგორ შეიძლება IE6 სთვის თვისება
    min-height ის იმპლემენტირება. ჩემი პრობლემა დაწვრილებით:
    როდესაც გვერდი მცირე მონაცემებს შეიცავს მარცხენა მენიუ
    შიგთავსზე გრძელია და ძალიან ცუდად გამოიყურება.
    min-height მუშაობს ყველა ბრაუზერში(რომელსაც ფირმის კლიენტები იყენებენ, გარდა IE6 ისა). CSS და Java-Script ჩემი სპეციალობა არ არის მაგრამ რა ტქმა უნდა უმაგისოდ არაფერი გამოდის. მადლობელი ვიქნები ყველანაირ დახმარებაზე.

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"