«
»

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

Feb 24 2007

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

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

1
<p class="someClass"></p>

ასეთ შემთხვევაში როდესაც ელემენტს სტილი განსაზღვრული აქვს class ატრიბუტის მეშვეობით და არა style ატრიბუტის მეშვეობით შეუძლებელია მივიღოთ დავუშვათ ელემენტის border-left-width css ატრიბუტის მნიშვნელობა. როგორ მოვიქცეთ იმ შემთხვევაში თუ აუცილებლად გვესაჭიროება რომელიმე css ატრიბუტის მნიშვნელობის დადგენა?

ამისათვის ორი გზა არსებობს:

  • w3c სტანდარტის გამოყენებით.
  • Internet Explorer – ის სტანდარტის გამოყენებით (IE ბრწყინავს როგორც ყოველთვის)

ზემოთთქმულიდან გამომდინარე შეგვიძლია დავწეროთ ასეთი JavaScript კოდი:

1
2
3
4
5
6
7
function getStyle(element, styleName) {
    if (isIe) {
       return element.currentStyle[styleName];
    } else {
       return document.defaultView.getComputedStyle(element, null).getPropertyValue(styleName);
    }
}

კოდი მარტივია და გასაგები (იგულისხმება რომ isIe ცვლადი განსაზღვრული გვაქვს ფუნქციის მიღმა) და შეიძლება ვიფიქროთ რომ ამით პრობლემა მოგვარებულია… თუმცა ეს ასე არ არის აქ კიდევ ერთ ძალიან მნიშვნელოვან და არასასიამოვნო პრობლემას ვაწყდებით.

მაგალითად CSS – ის წერისას თუ გვინდა განვსაზღვროთ ელემენტსი მარცხენა გვერდის სიგანე ვწერთ ასეთ კოდს: border-left-width: 5px; ან თუ გვსურს მისი ფონის ფერის განსაზღვრა: background-color: red; ამ ნიმუშებიდან ჩანს რომ სტილის დასახელება შედგება ორი ან ორზე მეტი სიტყვისგან რომელიც გამოყოფილია ტირეების მეშვეობით. თუ დაგვჭირდება რომელიმე ამ სტილის მნიშვნელობის მიღება შეგვიძლია გამოვიყენოთ ზემოთ აღწერილი getStyle ფუნქცია:

1
2
alert(getStyle(someElement, 'border-left-width'));
alert(getStyle(someElement, 'background-color'));

თუმცა ამ კოდს თუ გავტესტავთ Mozilla FireFox – სა და Internet Explorer – ში განსხვავებულ შედეგს მივიღებთ – ცეცხლაკუდა სწორ პასუხს დაგვიბრუნებს ხოლო ინტერნეტ ექსპლორერი კი არაფერს… რის გამო ხდება ეს?

მიზეზი მდგომარეობს იმაში რომ IE – ს CSS ატრიბუტებს ინახავს განსხვავებულად, მაგალითად: background-color ატრიბუტი IE – სთვის არის backgroundColor და თუ გვინდა მისი მნიშვნელობის მიღება კოდი უნდა ჩავწეროთ შემდეგნაირად:

1
2
alert(getStyle(someElement, 'borderLeftWidth'));
alert(getStyle(someElement, 'backgroundColor'));

ეხლა უკვე ყველაფერი სწორად იმუშავებს IE-ში, თუმცა ეს ნამდვილად არ არის გამოსავალი და ისევ ბროუზერების არათავსებადობის ჩიხში ვექცევით.

ამ პრობლემის თავიდან ასარიდებლად შეგვიძლია დავწეროთ ისეთი ფუნქცია რომელიც საჭიროების შემთხვევაში დავუშვათ ასეთ ტექსტს border-left-width მისცემს ასეთ სახეს borderLeftWidth და ბროუზერების შესაბამისად დაგვიბრუნებს სწორ რეზულტატს:

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
27
28
29
30
31
32
33
34
var Util = {
    style: {
        getStyle: function(element, styleName) {
           
            // private function
            function getCamelCase(string) {
                var tokens = string.split('-');
                if (tokens.length > 1) {
                    for (var i = 1; i < tokens.length; i++) {
                        tokens[i] = tokens[i].substring(0, 1).toUpperCase() + tokens[i].substring(1).toLowerCase();
                    }
                    string = tokens.join('');
                }
                return string;
            }
           
            var style = null;
           
            if (element.style[styleName]) {
                style = element.style[styleName];
            } else if (element.currentStyle) { //detect if we are working with IE
                styleName = getCamelCase(styleName);
                if (element.currentStyle[styleName]) {
                    style = element.currentStyle[styleName];
                }
            } else if (window.getComputedStyle) { //detect if w3c model is available
                style = document.defaultView.getComputedStyle(element, null).getPropertyValue(styleName);
            }
           
            return style;
           
        }
    }
}

კოდში პირველ რიგში ყურადღება უნდა მივაქციოთ getCamelCase ლოკალურ ფუნქციას (თუ რა არის camelCase შეგიძლიათ იხილოთ http://en.wikipedia.org/wiki/CamelCase მისამართზე) რომელიც ასრულებს ძირითად სამუშაოს და ტირეებით გამოყოფილ ატრიბუტის სახელს გარდაქმნის საჭირო ფორმატში (მაგ. border-left-width სტრიქონს გადაიყვანს borderLeftWidth) და აბრუნებს ამ ახალ მნიშვნელობას, რომლის გამოყენებაც უკვე შესაძლებელია IE-ს შემთხვევაში.

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

1
2
alert(Util.style.getStyle(someElement, 'border-left-width'));
alert(Util.style.getStyle(someElement, 'background-color'));

ეს კოდი იმუშავებს ორივე ბროუზერში ერთნაირად.

ტეგები: ,

2 Responses to “ელემენტის სტილებთან მუშაობა – ნაწილი 2”

  1. Code.ge Blog - For Better WEB » ელემენტის პოზიციების დადგენა says:
    October 5, 2007 at 2:57 am

    [...] სხვადასხვაა ბრაუზერებს შორის (იხ. შესაბამისი პოსტი) და გარდა იმისა რომ ეს გამოთვლა [...]

  2. JavaScript: String.replace() « Code.ge Blog says:
    September 16, 2009 at 12:27 pm

    [...] წლის წინ დავწერე პოსტი JavaScript – ით DOM ელემენტის სტილებთან [...]

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

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