सीएसएस अगर doctype

Question

सेट किया गया है, जावास्क्रिप्ट के माध्यम से एक ऐसा फ़ॉर्म तत्व के लिए लागू नहीं किया जा सकता मैं इस तरह पाठ बॉक्स है:

<input id="patId1" type="text" name="patId1" value=""> 

पृष्ठ लोड हो तो एक स्क्रिप्ट कहा जाता है जब जो पाठ बॉक्स की चौड़ाई निर्धारित करता है। यही कारण है कि कोड इस प्रकार है:

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth; 

जहां, patId2 एक ड्रॉपडाउन सूची (चुनिंदा टैग) है। असल में मैं जो करने की कोशिश कर रहा हूं वह टेक्स्टबॉक्स की चौड़ाई को ड्रॉपडाउन सूची की चौड़ाई के समान सेट कर रहा है।

अब, यदि DOCTYPE सेट है, तो उपर्युक्त स्क्रिप्ट काम नहीं करती है। लेकिन अगर यह सेट नहीं है, तो चौड़ाई लागू होती है।

कोई मदद।

Answer 1

offsetWidth का मान एक संख्या होगी। सीएसएस width संपत्ति लंबाई स्वीकार करती है। लंबाई (0 के अलावा) इकाइयों होना चाहिए। क्विर्क मोड में, ब्राउज़र सीएसएस विनिर्देश का उल्लंघन करते हैं और px इकाइयां मानते हैं।

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + 'px' 

Answer 2

ऑफसेट करने के लिए "पीएक्स" को ऑफसेट करने के लिए "पीएक्स" संलग्न करें। JSFiddle: http://jsfiddle.net/whizkid747/ysj2t/1/: document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + "px";

Answer 3

इस, करने का एक सरल तरीका है और मैं @cychan द्वारा निम्न पद से कोड सोद्देश्य है:

लिंक:

How to expand 'select' option width after the user wants to select an option

<div id="select-wrapper-01" style="width: 180px; overflow: hidden;"> 
    <select style="width: auto;" name="abc" id="10"> 
     <option value="-1">Any</option> 
     <option value="123">123</option> 
    </select> 
</div> 

:

यहाँ सामान्य दृष्टिकोण है

अब आप कह रहे हैं, "एक मिनट रुको? मेरे सबसे बड़ा विकल्प का चयन करें विस्तृत नहीं 180px है "

उस मामले में, हटाने width और overflow शैली div से जिम्मेदार बताते हैं

तो आसपास के div करने के लिए उपयुक्त चौड़ाई प्रदान करने के लिए जावास्क्रिप्ट का उपयोग करें, कुछ की तरह:।

var actualWidth = document.getElementById("patId2").offsetWidth; 
document.getElementById("select-wrapper-01").style.width = actualWidth + 'px'; 

यहाँ jsfiddle। पर फैंसी कुछ भी नहीं है एक काम की नकल है, लेकिन यह काम करता है।

http://jsfiddle.net/acegyver/eTEuk/

आप या चयन option रों के साथ खेल की कोशिश कर सकते हैं, उन्हें लंबे समय तक बना, छोटे, और कैसे select गतिशील ढल जाएगा देखते हैं।

क्रेडिट दें जहां क्रेडिट देय है: जैसा कि मैंने कहा है, मैंने @cychan द्वारा मौजूदा पोस्ट से कोड tweaked। आपके प्रश्न के लिए काम करने वाला कार्यान्वयन मेरे द्वारा है।