ब्राउज़र सीएसएस के माध्यम से आवंटित चौड़ाई मान को क्यों बदलता है?

Question

जब मैं सभी चयनों के लिए मूल शैली निर्दिष्ट करता हूं उदाहरण के लिए।

width: 300px; 
padding: 0; 
margin: 0; 
border-width: 1px; 

मुझे विभिन्न परिस्थितियों में जावास्क्रिप्ट के माध्यम से चौड़ाई को पुनर्प्राप्त करते समय अप्रत्याशित परिणाम मिलते हैं।

• जब चयन दिखाई साथ298px है।
• का चयन करते हैं प्रदर्शन है: कोई नहीं, चौड़ाई भी है 298px (एफएफ, jQuery)
• का चयन करते हैं प्रदर्शन के साथ एक div में है: कोई नहीं, चौड़ाई सही है 300px।

(: बॉक्स-आकार: परिणाम भी एक ही बताए है सीमा बॉक्स)

ठीक है, पुनः प्राप्त चौड़ाई कभी कभी प्रयोग किया ब्राउज़र और जावास्क्रिप्ट ढांचे से अलग है, लेकिन सभी के सभी मैं बस चाहता हूँ निर्दिष्ट चौड़ाई (300 पीएक्स) को पुनः प्राप्त करने में सक्षम हो। (मुझे लगता है कि यह "औपचारिक weirdness" यहाँ कहा गया है के साथ क्या करने के लिए कुछ करने के लिए है: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/, लेकिन क्यों ब्राउज़रों चौड़ाई उपयोगकर्ता ?? द्वारा आवंटित का उपयोग नहीं होगा)

मैं कैसे सौंपा चौड़ाई प्राप्त कर सकते हैं? क्या वास्तव में ऐसा करने का तरीका है?

उदाहरण:

http://jsfiddle.net/ETCcH/5/

(देख सकते हैं और विभिन्न ब्राउज़रों के साथ प्रयास करें)

Answer 1

तुम कभी मिल जाएगा (एक उदाहरण mootools उपयोग करने के लिए एक 4 के साथ jQuery का उपयोग कर, या बदलने के 5 के लिए) सीएसएस फ़ाइल में लिखा मूल्य। जावास्क्रिप्ट के साथ आपको वेब ब्राउज़र द्वारा उस तत्व पर वर्तमान में लागू सीएसएस गुण प्राप्त होंगे।

यदि आपके पास चौड़ाई वास्तव में तय की गई है, तो आप इसे अधिकतम-चौड़ाई सेट 300px के साथ "बल" कर सकते हैं या overflow: hidden जोड़ सकते हैं - यदि यह एक विकल्प है।

Answer 2

ऐसा लगता है कि चुनिंदा तत्वों के लिए डिफ़ॉल्ट रूप से आपका ब्राउज़र बॉक्स-आकार सीमा-बॉक्स है। बॉक्स आकार बदलने का प्रयास करें: सामग्री-बॉक्स; चयन और jquery पर आपको सही परिणाम देते हैं।

Jquery आपको 'चौड़ाई' विधि के साथ सामग्री चौड़ाई प्राप्त करता है, इसलिए यह मार्जिन, पैडिंग और सीमा को बाहर ले जाता है। बॉक्स आकार के साथ: सीमा-बॉक्स, दी गई चौड़ाई पैडिंग और सीमा को खाते में ले जाती है।

Ernoriel

Answer 3

वास्तव में यह सीमाओं जाती है कि आप मुसीबत खड़ी है। सीमा-चौड़ाई को 0 पर सेट करें और आप सभी के लिए 300px देख पाएंगे। असल में ब्राउज़र तत्व की चौड़ाई 300px पर सेट कर रहे हैं क्योंकि आप इसकी अपेक्षा कर रहे हैं, और सीमाओं को जोड़ रहे हैं। दृश्य तत्वों के लिए आप ऑफसेटविड्थ का उपयोग करके तत्व की पूरी चौड़ाई प्राप्त कर सकते हैं (यदि आप डिस्प्ले को किसी भी पर सेट करते हैं तो 0 पर सेट किया जाएगा।

Answer 4

सीएसएस में निर्दिष्ट मान तक पहुंचने का कोई आसान तरीका नहीं है।

जब आप jQuery में .css() का उपयोग करते हैं, तो आपको computed value मिल रहा है। इसके बाद आपको specified value कहा जाता है।

जब कोई निर्दिष्ट मान गणना है, तो यह स्थिति (आपके बेड़े, सीमाओं में) के अनुसार समायोजित होगा। यही कारण है कि चौड़ाई अलग है। मुझे नहीं पता कि क्यों एक पैरेंट div के भीतर छुपा चयन चयनित सीमाओं में समायोजित नहीं करता है।

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

समाधान 2: अब, अगर आप वास्तव में निर्धारित मूल्य चाहते हैं, मुझे लगता है आप document.styleSheets के माध्यम से और हर स्टाइलशीट के लिए जा सकते हैं, cssRules संपत्ति का उपयोग करें और अपने रास्ते नीचे काम जब तक आप मूल्य तुम 'मिल गया है फिर से देख रहे हैं जब मैंने क्रोम में यह कोशिश की, cssRules खाली प्रतीत होता है, लेकिन फ़ायरफ़ॉक्स इसे पॉप्युलेट करता है और पृष्ठ से जुड़े प्रत्येक स्टाइलशीट में आज्ञाकारी रूप से सभी शैलियों को सूचीबद्ध करता है।

मैं इसकी सलाह नहीं देते, लेकिन अगर आप नीचे कि छेद जाने का निर्णय, तो आप इन अतः सवालों में से किसी में रुचि हो सकती है:

• Mapping computed CSS styles to specified ones?
• Listing known CSS classes using Javascript

मैं box-sizing को बदलने की अनुशंसा न करें क्योंकि यह आपको वह मूल्य देगा जो आप खोज रहे हैं, लेकिन तत्व की वास्तविक चौड़ाई व्यापक होगी (आधार चौड़ाई 300 पीएक्स + सीमाएं = 302 पीएक्स चौड़ी)।

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