क्या मैं जावास्क्रिप्ट के माध्यम से एक गैर मानक सीएसएस संपत्ति का मूल्य ला सकता हूं?

Question

मैं एक स्टाइलशीट (इनलाइन शैली विशेषता नहीं) में सेट एक कस्टम (गैर मानक) सीएसएस संपत्ति पढ़ने की कोशिश कर रहा हूं और इसका मूल्य प्राप्त कर रहा हूं। उदाहरण के लिए इस सीएसएस लें:

#someElement { 
    foo: 'bar'; 
} 

मैं IE7 में currentStyle संपत्ति के साथ अपने मूल्य पाने में कामयाब रहे है

var element = document.getElementById('someElement'); 
var val = element.currentStyle.foo; 

लेकिन currentStyle एमएस-विशिष्ट है। इसलिए मैंने फ़ायरफ़ॉक्स 3 और सफारी 3:

var val = getComputedStyle(element,null).foo; 

... और यह अपरिभाषित लौटाता है। क्या कोई कस्टम सीएसएस संपत्ति मूल्य को पुनः प्राप्त करने का क्रॉस-ब्राउज़र तरीका जानता है?

(आपने गौर किया हो सकता है, यह नहीं वैध सीएसएस है। लेकिन यह रूप में लंबे समय के रूप में मूल्य सही सिंटैक्स इस प्रकार काम करना चाहिए। एक बेहतर संपत्ति नाम "-myNameSpace-foo" या कुछ और होगा।)

Answer 1

फ़ायरफ़ॉक्स टैग, विशेषताओं या सीएसएस शैलियों को नहीं लेता है जो कोड से डीओएम में नहीं समझते हैं। यह डिजाइन द्वारा है। जावास्क्रिप्ट केवल डीओएम तक पहुंच है, न कि कोड। तो नहीं, जावास्क्रिप्ट से किसी संपत्ति तक पहुंचने का कोई तरीका नहीं है कि ब्राउज़र स्वयं समर्थित नहीं है।

Answer 2

आईई में स्टाइलशीट जानकारी में पढ़कर, आप इन "फर्जी" गुण प्राप्त कर सकते हैं, लेकिन केवल आईई में जो मुझे पता है।

var firstSS = document.styleSheets[0]; 
var firstSSRule = firstSS.rules[0]; 
if(typeof(firstSSRule.style.bar) != 'undefined'){ 
    alert('value of [foo] is: ' + firstSSRule.style.bar); 
} else { 
    alert('does not have [foo] property'); 
} 

इसका बदसूरत कोड, लेकिन आपको तस्वीर मिलती है।

Answer 3

एक तरीका निश्चित रूप से जावास्क्रिप्ट में अपना स्वयं का सीएसएस-पार्सर लिखना होगा। लेकिन मेरा मानना ​​है कि शीर्ष पर वास्तव में है।

Answer 4

मेरे पास कुछ ऐसे पृष्ठ हैं जो एमएसआईई में अद्भुत काम करते हैं, लेकिन शैलियों और स्टाइल शीट में बहुत सारी जानकारी है। तो मैं कामकाज के बारे में सोच रहा हूँ। एक चीज फ़ायरफ़ॉक्स की अनुमति देता है, दयालुता, डीओएम में इनलाइन विशेषताओं को डाल रहा है।

1. एक प्रासंगिक "nStyle" के साथ एचटीएमएल दस्तावेज़ में प्रत्येक इनलाइन शैली बदलें, जैसे, < span class = "cls1" nStyle = "color:: तो यहाँ एक आंशिक रणनीति है लाल; nref: #myid; foo: bar "> ... </span>

2. जब पृष्ठ लोड होता है, तो प्रत्येक तत्व नोड के साथ निम्न कार्य करें: (ए) टैग के cssText में nStyle विशेषता का मान कॉपी करें, और उसी पर समय (बी) गैर मानक गुणों को एक आसान प्रारूप में रूपांतरित करें, ताकि, उदाहरण के लिए, node.getAttribute ('nStyle') ऑब्जेक्ट {"nref": "# myid", "foo": "bar"} बन जाता है।

3. एक "गणना स्टाइल" फ़ंक्शन लिखें जो कि उपलब्ध है या नहीं, जो शैली या एन स्टाइल प्राप्त करता है।

स्टाइल शीट उनके लिए एक समान रणनीति सक्षम हो सकता है के लिए एक मोटा पार्सर लेखन, लेकिन मैं एक सवाल है: मैं Firefox से सेंसरशिप के बिना शैली पत्रक पढ़ने की बाधा से अधिक कैसे मिलता है?

Answer 5

आधुनिक ब्राउज़र केवल किसी भी अवैध सीएसएस को फेंक देंगे।हालांकि, अगर आप सामग्री संपत्ति के बाद से यह केवल प्रभाव पड़ता है :after, :before साथ आदि आप इसे अंदर JSON स्टोर कर सकते हैं का उपयोग कर सकते हैं:

#someElement { 
    content: '{"foo": "bar"}'; 
} 

तो इसे पुनः प्राप्त करने के लिए इस तरह कोड का उपयोग करें:

var CSSMetaData = function() { 

    function trimQuotes(str) { 
     return str.replace(/^['"]/, "").replace(/["']$/, ""); 
    } 

    function fixFirefoxEscape(str) { 
     return str.replace(/\\"/g, '"'); 
    } 

    var forEach = [].forEach, 
     div = document.createElement("div"), 
     matchesSelector = div.webkitMatchesSelector || 
          div.mozMatchesSelector || 
          div.msMatchesSelector || 
          div.oMatchesSelector || 
          div.matchesSelector, 
     data = {}; 

    forEach.call(document.styleSheets, function(styleSheet) { 
     forEach.call(styleSheet.cssRules, function(rule) { 
      var content = rule.style.getPropertyValue("content"), 
       obj; 

      if(content) { 
       content = trimQuotes(content); 
       try { 
        obj = JSON.parse(content); 
       } 
       catch(e) { 
        try { 

         obj = JSON.parse(fixFirefoxEscape(content)); 
        } 
        catch(e2) { 
         return ; 
        } 

       } 
       data[rule.selectorText] = obj; 
      } 
     }); 

    }); 


    return { 

     getDataByElement: function(elem) { 
      var storedData; 
      for(var selector in data) { 
       if(matchesSelector.call(elem, selector)) { 
        storedData = data[selector]; 
        if(storedData) return storedData; 

       } 
      } 

      return null; 
     } 
    }; 

}(); 
var obj = CSSMetaData.getDataByElement(document.getElementById("someElement")); 
console.log(obj.foo); //bar 

नोट, यह केवल आधुनिक ब्राउज़रों के लिए है। डेमो: http://jsfiddle.net/xFjZp/3/

Answer 6

शायद आप LESS के साथ प्रयास कर सकते हैं। यह गतिशील स्टाइलशीट भाषा है और आप गैर-मानक सीएसएस विशेषताओं, कमांड को बाद में संकलित कर सकते हैं।