jQuery $()। सीएसएस ("सामग्री") IE9

Question

में स्ट्रिंग "सामान्य" लौटने पर मैं सीएसएस content विशेषता का उपयोग कर रहा हूं ताकि मेरी कम स्टाइलशीट से कुछ मूल्यों को जावास्क्रिप्ट में पास किया जा सके (कैनवास में कम से कम कुछ रंगों का उपयोग करने के लिए तत्व)। मेरी ज़िंदगी को आसान बनाने के लिए मैंने इन मानों को जावास्क्रिप्ट में पार्स करने के लिए एक आसान तरीके से रखने का फैसला किया।

कम कोड:

div#colorChart-critical6 { 
    content: '#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00'; 
} 

तब मैं jQuery का उपयोग कर उन्हें पढ़ने की कोशिश:

$("div#colorChart-critical").css("content").split(","); 

समस्या यह है कि में है

div#colorChart-critical { 
    content:'@{critical-highest},@{critical-veryhigh},@{critical-high},@{critical-low},@{critical-medium},@{critical-verylow}'; 
} 

जो जब संकलित निम्नलिखित सीएसएस लाता है IE9 कॉलिंग $("div#colorChart-critical").css("content") कुछ कारणों से स्ट्रिंग "normal" लौट रही है। ओपेरा, फ़ायरफ़ॉक्स, सफारी और क्रोम ठीक काम करता है।

यह IE9 में क्यों होता है?

आईई 9 पर इस मुद्दे के आसपास कोई काम? यदि कोई अन्य सीएसएस एट्रिब्यूट नहीं है तो मैं यादृच्छिक ग्रंथों को रख सकता हूं?

मैं की तरह कुछ इस्तेमाल कर सकते हैं:

background: url(#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00); 

लेकिन इस कंसोल पर त्रुटियों उत्पन्न होगा।

Answer 1

बोल्टक्लॉक उत्तर मेरी समस्याओं का कारण दिखाता है। मुझे सामग्री सीएसएस संपत्ति के बजाय फ़ॉन्ट-फ़ैमिली का उपयोग करके एक कार्य-आसपास मिला।

मेरे कम कोड:

div#colorChart-maincolors { 
    font-family: '@{colorChart1},@{colorChart2},@{colorChart3},@{colorChart4},@{colorChart5},@{colorChart6}'; 
} 

कौन सा सीएसएस में संकलित देता है:

div#colorChart-maincolors { 
    font-family: '#c0392b,#2980b9,#2ecc71,#f1c40f,#ecf0f1,#34495e'; 
} 

स्ट्रिंग प्राप्त किया जा सकता का उपयोग कर:

removeQuotes= function(string) { 
    return string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, ''); 
}; 
removeQuotes($("#colorChart-maincolors").css("font-family")); //add a .split(',') to get the colors as an array 

समारोह removeQuotes आवश्यक है, क्योंकि प्रत्येक ब्राउज़र getComputedStyle की वापसी में और विभिन्न प्रकार के उद्धरण जोड़ते हैं (और विस्तार से jQuer वाई। सीएसएस() विधि)। आईई 9 एक डबल कोट जोड़ता है, वेबकिट एक सिंगल कोट जोड़ता है।

इस पोस्ट को सीएसएस चाल पर देखें: http://css-tricks.com/making-sass-talk-to-javascript-with-json/ अधिक जानकारी के लिए।

Answer 2

यह क्योंकि content के रूप में परिभाषित किया गया CSS2.1 केवल :before और :after छद्म तत्वों पर तत्वों पर काम नहीं करता है, है। आईई 9 बस सीएसएस 2.1 spec का पालन कर रहा है, जो mandatescontent तत्वों पर normal पर गणना की जाती है।

मैं क्यों अन्य ब्राउज़रों मूल्य आपके द्वारा निर्धारित वापसी होगी पता नहीं है, विशेष रूप से है कि .css() makes use of getComputedStyle() on those browsers पर विचार। यदि वे CSS2.1 content लागू कर रहे हैं, तो वे मान को normal पर गणना नहीं करके CSS2.1 का उल्लंघन कर रहे हैं। यदि वे देर से CSS3 कार्यान्वयन की तैयारी कर रहे हैं, जो कुछ भी हो सकता है, तो यह समझ में आता है कि वे इसे वास्तविक तत्वों पर किसी भी तरह लागू करते हैं ... किसी भी तरह से शर्म की बात है।

जो मुझे किसी अन्य बिंदु पर लाता है: यदि आप वास्तव में किसी तत्व की सामग्री को संशोधित करने के लिए सीएसएस का उपयोग करने की कोशिश नहीं कर रहे हैं, तो content का उपयोग न करें, भले ही तथ्य यह है कि तत्वों के उपयोग के लिए परिभाषित नहीं किया गया है आप इस तकनीक का उपयोग पहली जगह में कर रहे हैं। आप उन रंगों को कुछ वर्गों में निर्दिष्ट करने का प्रयास कर सकते हैं, एक छुपा तत्व बना सकते हैं और इसके बजाय उस तत्व की रंग शैलियों को पूछताछ कर सकते हैं।

Answer 3

आप replace(/["']/g, "") उपयोग कर सकते हैं स्ट्रिंग से अतिरिक्त उद्धरण को दूर करने के

""string"""string"