जावास्क्रिप्ट के साथ एक सीएसएस संपत्ति के लिए वैध मानों की सूची कैसे प्राप्त करें?

Question

क्या किसी दिए गए सीएसएस प्रॉपर्टी के लिए जावास्क्रिप्ट के साथ मान्य मानों की सूची प्राप्त करने का कोई तरीका है या जांचें कि आपके द्वारा निर्धारित मूल्य वैध है या नहीं?

पूर्व .: अगर मैं document.getElementById('foo').style.cursor = "grab"; सेट करने का प्रयास करता हूं।

कुछ भी नहीं होता है और संपत्ति अपरिवर्तित बनी हुई है (कम से कम क्रोम में)।

मैं केवल वर्तमान ब्राउज़र के लिए मान्य मानों की एक सूची प्राप्त करना चाहता हूं।

उदाहरण के लिए, फ़ायरफ़ॉक्स पर मुझे सूची में -moz-grab मिल जाएगा और आईई पर मुझे पकड़ या उसके किसी भी प्रकार का संस्करण नहीं मिलेगा।

मैं आवश्यकता होने पर विक्रेता उपसर्ग जोड़ने में सक्षम होना चाहता हूं और शायद फॉलबैक प्रदान करने का एक तरीका हो सकता है।

Answer 1

मुझे पता है कि आपका प्रश्न विक्रेता विशिष्ट कर्सर (और, संभावित रूप से, अन्य सीएसएस गुणों) के लिए मान्य मानों की जांच करने का एक तरीका मांग रहा है, लेकिन यदि आप जो भी ढूंढ रहे हैं वह कर्सर स्टाइल के लिए एक क्रॉस-ब्राउज़र समाधान है, तो हो सकता है कि आप प्रश्न में कर्सर के लिए बस अपनी खुद की छवियों का उपयोग करना चाहते हैं।

http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur http://www.google.com/intl/en_ALL/mapfiles/openhand.cur

उदाहरण के लिए, आप इस्तेमाल कर सकते हैं:

document.getElementById('foo').style.cursor = "url(/closedhand.cur) 4 4"; 

तुम भी इस संयोजन के रूप में उदाहरण के लिए, यदि ज्ञात गुण मान्य हैं देखने के लिए एक चेक के साथ उपयोग करने के लिए इच्छा हो सकती है:

if(window.CSS.supports('cursor','grab')) 
{ 
    cursor = 'grab'; 
} 
else if(window.CSS.supports('cursor', '-moz-grab')) 
{ 
    cursor = '-moz-grab'; 
} 
else 
{ 
    cursor = 'url(/grab.cur)'; 
} 
document.getElementById('foo').style.cursor = cursor; 

आप आसानी से सभी लोकप्रिय विक्रेता उपसर्गों का परीक्षण करने के लिए इसका विस्तार कर सकते हैं, फिर केवल थाई लागू करें जिन गुणों के साथ आप जानते हैं उनके पास तर्क है, सीमित ब्राउज़र समर्थन है।

CSS.supports API Browser Compatibility
CSS.supports MDN

Answer 2

एक दृष्टिकोण है कि मेरे दिमाग में आता है वैध सीएसएस मूल्यों के साथ प्री-पॉप्युलेट करने के लिए सरणियों, और फिर खोज है -

var validValues = { 
    'textAlign': ['left', 'right', 'center', 'justify', 'start'] 
}; 

var userSpecifiedCSSValue = documet.getElementById('foo').style.textAlign.toLower(); 
if (validValues.textAlign.indexOf(userSpecifiedCSSValue) > -1) { 
    // valid 
} 

नोट: indexOf आईई < लिए उपलब्ध नहीं है = 8.

var userStyle = document.getElementById('foo').style, 
    userSpecifiedValue, 
    allowedCSSValues; 

for (cssProperty in userStyle) { 

    if (userStyle.hasOwnProperty(cssProperty) && 
      validValues.hasOwnProperty(cssProperty)) { 

     userSpecifiedValue = userStyle[cssProperty].toLower(); 
     allowedCSSValues = validValues[cssProperty] 

     if (allowedCSSValues.indexOf(userSpecifiedValue) > -1) { 
      // valid 
     } else { 
      // invalid 
     } 
    } 
} 

आप भी ब्राउज़र-विशिष्ट सत्यापन शामिल करना चाहते हैं, तो आप वैध valu के सूची बना सकते हैं - आप इसे सामान्य बनाना चाहते हैं एस ब्राउज़र प्रकार के आधार पर। बस अपनी ऑब्जेक्ट में एक और परत बनाएं -

var validValues = { 
    'chrome': { 
     'textAlign': []// arrays with values 
    } 
} 

हालांकि मेरे लिए यह अभी भी एक हैकी समाधान जैसा लगता है।