मैं एक हाइफ़न के साथ एक जावास्क्रिप्ट ऑब्जेक्ट प्रॉपर्टी का संदर्भ कैसे दे सकता हूं?

106

इस लिपि का उपयोग सभी विरासत में मिली शैली आदि की एक शैली वस्तु बनाने के लिए।

var style = css($(this));
alert (style.width);
alert (style.text-align);

निम्नलिखित के साथ, पहला अलर्ट ठीक काम करेगा, लेकिन दूसरा नहीं .. यह -एक माइनस के रूप में व्याख्या कर रहा है जिसे मैं मानता हूं .. डिबगर 'अनकवर्ड रेफरेंस एरर' कहता है। मैं इसके आसपास उद्धरण नहीं डाल सकता, हालांकि, क्योंकि यह एक स्ट्रिंग नहीं है। तो मैं इस वस्तु संपत्ति का उपयोग कैसे करूं?

javascript properties

— डैमन
स्रोत

डेमन, अस्पष्टता और भ्रम को संबोधित करते हुए (विवेचनात्मक उत्तरों द्वारा भी दर्शाए गए और व्याख्या के आधार पर जोड़े गए / हटाए गए डाउनवोट्स ...): क्या आपका मतलब विशेष रूप से CSS गुणों से है, जैसा कि आपके उदाहरण से संकेत मिलता है और अधिकांश उत्तरों, या किसी JS गुणों द्वारा ग्रहण किया गया है। , सामान्य तौर पर, शीर्षक और एक CSSटैग की कमी से संकेत मिलता है ? [हाँ, मुझे पता है कि यह 7 साल है। :)]

— एसजे।

@Sz। मेरा मतलब था any js propertyक्योंकि मुझे एक संपत्ति का उल्लेख करने में समस्या हो रही थी जिसमें एक हाइफ़न था (जो कि एक सीएसएस संपत्ति भी हुआ ... मुझे पता नहीं था कि मैं जो करने की कोशिश कर रहा था उसके साथ एक और समस्या थी)। तो यह एक अजीब है जो 2 अलग-अलग मुद्दों को कवर करता है। लेकिन मैं कहूंगा कि शीर्ष उत्तर दोनों मुद्दों की व्याख्या करता है।

— डेमॉन

154

संपादित करें

टिप्पणियों को देखें आप देखेंगे कि सीएसएस गुणों के लिए कुंजी संकेतन कई गुणों के साथ संगत नहीं है। ऊंट मामले कुंजी संकेतन का उपयोग इसलिए वर्तमान तरीका है

obj.style-attr // would become 

obj["styleAttr"]

डॉट के बजाय कुंजी संकेतन का उपयोग करें

style["text-align"]

Js में सभी सरणियाँ ऑब्जेक्ट्स हैं और सभी ऑब्जेक्ट्स केवल एसोसिएटिव एरेज़ हैं, इसका मतलब है कि आप किसी ऑब्जेक्ट में किसी स्थान को संदर्भित कर सकते हैं जैसे कि आप किसी ऐरे में किसी कुंजी को संदर्भित करेंगे।

arr[0]

या वस्तु

obj["method"] == obj.method

इस तरह से संपत्तियों तक पहुँचने के दौरान कुछ बातें याद रखना

जब तक आप काउंटर के साथ कुछ नहीं कर रहे हैं या गतिशील विधि नामों का उपयोग नहीं कर रहे हैं, तो उनका मूल्यांकन किया जाता है।

इसका मतलब यह है कि obj [विधि] आपको एक अपरिभाषित त्रुटि देगा जबकि obj ["विधि"] नहीं होगा
यदि आप उन वर्णों का उपयोग कर रहे हैं जो js चर में अनुमत नहीं हैं, तो आपको इस संकेतन का उपयोग करना चाहिए।

यह रेगेक्स बहुत ज्यादा इसे समेटता है

[a-zA-Z_$][0-9a-zA-Z_$]*

— austinbv
स्रोत

1

कुंजी संकेतन यहाँ लागू नहीं होता है - सीएसएस कुंजियों में ऊंट मामले का उपयोग करके शैलियों को परिभाषित करता है: jsfiddle.net/49vkD

— ब्रायन

क्या ब्राउज़र? हायफ़न पर मेरे लिए फेल IE7, IE8, FFX 3.5 में मिलता है। और, असफल होने से मेरा मतलब उन दोनों के लिए "अपरिभाषित" है ...

— ब्रायन

@ बायरन का परीक्षण सफारी और क्रोम में लाल, लाल, केंद्र, केंद्र में होता है। मैं अब ff में कोशिश करूँगा

— austinbv

@ दिलचस्प, फ़ायरफ़ॉक्स 6 में काम नहीं किया, मुझे नहीं पता था कि ... हर दिन कुछ नया सीखें

— austinbv

1

हटाए गए मेरे उत्तरदाता के रूप में एक अन्य उत्तरदाता ने बताया कि सीएसएस संग्रह हेट प्रश्न का विषय था, लेकिन वास्तविक सवाल यह था कि एक हाइफ़न संपत्ति कैसे प्राप्त की जाए।

— ब्रायन

18

-जावास्क्रिप्ट गुणों में ऊंट गुणों के साथ सीएसएस गुणों का प्रतिनिधित्व किया जाता है। यह होगा:

alert( style.textAlign );

आप स्ट्रिंग का उपयोग करने के लिए एक ब्रैकेट नोटेशन का उपयोग भी कर सकते हैं:

alert( style['text-align'] );

संपत्ति के नाम में केवल वर्ण, संख्याएं, प्रसिद्ध $संकेत और _(pimvdb के लिए धन्यवाद) हो सकते हैं।

— JANDY
स्रोत

उत्तरार्द्ध काम करता है .. उन वाक्य रचनाओं में से एक जो मैं अभी याद करता था। मेरे द्वारा संदर्भित स्क्रिप्ट नियमित सीएसएस शैली के नामों का उपयोग करती है, लेकिन इसके बारे में जानने के लिए अभी भी उपयोगी है!

— डेमॉन

संपत्ति के नाम हालांकि संख्याओं के साथ शुरू नहीं हो सकते हैं

— austinbv

संपत्ति के नाम में यूनिकोड वर्णों का एक विशाल संग्रह हो सकता है। यह युक्ति से ठीक है और ब्राउज़रों के साथ ठीक है। उदाहरण के लिए:var ò_ó = 'angry';

— कैमिलो मार्टिन

दूसरे कोड का उपयोग न करें। सीएसएस गुण ऊंट-आवरण हैं। आपका कोड कुछ ब्राउज़रों पर काम कर सकता है लेकिन मानक नहीं है।

— ओरोल

17

मूल प्रश्न का उत्तर है: संपत्ति का नाम उद्धरण में रखें और सरणी शैली अनुक्रमण का उपयोग करें:

obj['property-with-hyphens'];

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

style.textAlign;

हालाँकि यह समाधान केवल CSS संपत्तियों के लिए काम करता है। उदाहरण के लिए,

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2

— स्टोनी
स्रोत

2

@ ब्रायन आप सीएसएस संपत्तियों के लिए सही हैं। हालांकि, मैं मूल सामान्य प्रश्न का उत्तर दे रहा था "मैं एक हाइफ़न के साथ एक जावास्क्रिप्ट ऑब्जेक्ट संपत्ति का संदर्भ कैसे दे सकता हूं?" यहाँ आपके jsfiddle का अपडेटेड संस्करण है: jsfiddle.net/49vkD/1

— Stoney

1

वास्तव में मैंने उत्तरों के दायरे को अपने आप ही सीमित कर दिया - मैंने ओपी को विशेष रूप से स्टाइल ऑब्जेक्ट माना। मेरे डाउन-वोट को हटा दिया क्योंकि सवाल थोड़ा ज्यादा खुला था।

— ब्रायन

मेरे विचार में तुम सही हो। शायद यही बात डेमन को चाहिए थी। मैंने इसे सचमुच पढ़ा।

— स्टोनी

आपको ऊंट आवरण नाम का उपयोग करना चाहिए । नहीं कर सकते ।

— ओरोल

9

कोष्ठक का प्रयोग करें:

var notTheFlippingStyleObject = {
    'a-b': 1
};

console.log(notTheFlippingStyleObject["a-b"] === 1); // true

ऑब्जेक्ट पर अधिक जानकारी: MDN

नोट: यदि आप स्टाइल ऑब्जेक्ट, CSSStyleDeclaration एक्सेस कर रहे हैं , तो इसे जावास्क्रिप्ट से एक्सेस करने के लिए CamelCase का उपयोग करें। अधिक जानकारी यहाँ

— जो
स्रोत

1

आप मुझे खुश नहीं कर रहे हैं - आप इस प्रश्न के कई अन्य उत्तरदाताओं के अनुसार, w3c मानक को खुश कर रहे हैं: w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties , लेकिन इसे एक ही माना जाता है । ..

— ब्रायन

इस कोड का उपयोग न करें। ऐसा नहीं है कि ऊंट आवरण वाले सीएसएस गुण अधिक क्रॉस-ब्राउज़र हैं, यह है कि ऊंट मामले के बजाय हाइफ़न का उपयोग करना मानक नहीं है और काम नहीं करना चाहिए।

— ओरियल

4

alert(style.textAlign)

या

alert(style["textAlign"]);

— ब्रायन
स्रोत

4

सीधे सवाल का जवाब देने के लिए: style['text-align']आप इसमें एक हाइफ़न के साथ एक संपत्ति का संदर्भ कैसे देंगे। लेकिन style.textAlign(या style['textAlign']) इस मामले में क्या उपयोग किया जाना चाहिए।

— डॉसन टोथ
स्रोत

इसका उपयोग न करें। सीएसएस गुण ऊंट-आवरण हैं। आपका कोड कुछ ब्राउज़रों पर काम कर सकता है लेकिन मानक नहीं है।

— ओरियल

ऊंट मामले का उपयोग करने के लिए समायोजित।

— डॉसन टूथ

3

हाईफ़न किए गए शैली गुणों को जावास्क्रिप्ट में कैमलकेस के माध्यम से संदर्भित किया जाता है , इसलिए उपयोग करें style.textAlign।

— जॉनी बुकानन
स्रोत

3

आपकी समस्या को हल करने के लिए : इस समस्या से बचने के लिए कैमलकेस में जावास्क्रिप्ट गुणों के द्वारा उनमें हाइफ़न के साथ CSS गुणों का प्रतिनिधित्व किया जाता है। आप चाहते हैं style.textAlign:।

प्रश्न का उत्तर देने के लिए : वर्गाकार कोष्ठक संकेतन का उपयोग करें : obj.propयह वैसा ही है जैसा obj["prop"]कि आप तार के उपयोग से संपत्ति के नाम तक पहुँच सकते हैं और ऐसे पात्रों का उपयोग कर सकते हैं जो पहचानकर्ताओं में निषिद्ध हैं।

— क्वेंटिन
स्रोत

2

ऑब्जेक्ट प्रॉपर्टी के नाम css नामों के लिए एक-से-एक मैच नहीं हैं।

— डग चैंबरलेन
स्रोत

2

मुझे लगता है कि सीएसएस शैलियों के मामले में वे जावास्क्रिप्ट में कैमलकेस में बदल test-alignजाते हैं textAlign। सामान्य स्थिति में जहां आप ऐसी संपत्ति तक पहुंचना चाहते हैं जिसमें गैर-मानक वर्ण होते हैं, जो आप सरणी-शैली का उपयोग करते हैं। ['text-align']

— GordonM
स्रोत

0

सबसे पहले, मुझे आश्चर्य है कि समाधान मेरे अंत पर काम क्यों नहीं किया

api['data-sitekey'] //returns undefined

... बाद में पता चला कि डेटा विशेषताओं तक पहुंच अलग है: यह इस तरह होना चाहिए:

var api = document.getElementById("some-api");
api.dataset.sitekey

उम्मीद है की यह मदद करेगा!

— Woppi
स्रोत