जावास्क्रिप्ट में DIV की चौड़ाई और ऊंचाई निर्धारित करना

108

मैं एक है divके साथ id="div_register"। मैं इसका widthगतिशील रूप से जावास्क्रिप्ट में सेट करना चाहता हूं ।

मैं निम्नलिखित कोड का उपयोग कर रहा हूं:

getElementById('div_register').style.width=500;

लेकिन कोड की यह लाइन काम नहीं कर रही है।

मैंने pxनिम्नलिखित की तरह इकाइयों का उपयोग करने की भी कोशिश की , फिर भी कोई किस्मत नहीं:

getElementById('div_register').style.width='500px';

तथा

getElementById('div_register').style.width='500';

तथा

getElementById('div_register').style.width=500px;

लेकिन इस कोड में से कोई भी मेरे लिए काम नहीं कर रहा है।

मुझे नहीं पता कि क्या गलत हो रहा है।

मैं मोज़िला फ़ायरफ़ॉक्स का उपयोग कर रहा हूँ।

संपादित करें

<html>
    <head>
        <title>Untitled</title>
        <script>
            function show_update_profile() {
                document.getElementById('black_fade').style.display='block';
                //document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
                document.getElementById('div_register').style.height= "500px";
                document.getElementById('div_register').style.width= '500px';
                //alert('kutta');
                  document.getElementById('div_register').style.display='block';
                document.getElementById('register_flag').value= 1;
                document.getElementById('physical_flag').value= 0;
                document.getElementById('cultural_flag').value= 0;
                document.getElementById('professional_flag').value= 0;
                document.getElementById('lifestyle_flag').value= 0;
                document.getElementById('hobby_flag').value= 0;
                //alert(window.innerWidth);
            }
        </script>
        <style>
            .white_content {
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
        </div>
        <div id="div_register">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                      welcome 
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

javascript

— Saswat
स्रोत

क्या आपने onloadईवेंट के बाद चौड़ाई निर्धारित करने का प्रयास किया है?

— साइक्लोनोस्कोप

1

क्या आपने जांच की, कि div_registerआपके तत्व की सही आईडी क्या है? शायद हमें कुछ html भी दें ... style.width="500px";सही होना चाहिए।

— पॉवरमिच

मैंने document.getElementById ('div_register') सेट किया है। style.display = 'block', और फिर document.getElementById ('div_regsiter') सेट करें। style.width = 500px ';

— सास्वत

1

इसके लायक के लिए, आपके पास "3" और आपके फ़ंक्शन की पंक्तियों में "दस्तावेज़" शब्द में टाइपो है ... जो इसे निश्चित रूप से काम करने से रखेगा।

— डैनियल ज़ैबो

1

का उपयोग onclick="show_update_profile()"करने के बजायonclick="javascript:show_update_profile()"

— Tejasva ध्यानी

227

आपके द्वारा उपयोग किए जा रहे गुण फ़ायरफ़ॉक्स, क्रोम और अन्य गैर-IE ब्राउज़र में काम नहीं कर सकते हैं। सभी ब्राउज़रों में यह काम करने के लिए, मैं निम्नलिखित जोड़ने का भी सुझाव देता हूं:

document.getElementById('div_register').setAttribute("style","width:500px");

क्रॉस-अनुकूलता के लिए, आपको अभी भी संपत्ति का उपयोग करने की आवश्यकता होगी। आदेश भी मायने रख सकता है। उदाहरण के लिए, मेरे कोड में, जब जावास्क्रिप्ट के साथ शैली गुण सेट करते हैं, तो मैं पहले शैली विशेषता सेट करता हूं, फिर मैं गुण सेट करता हूं:

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";

इस प्रकार, आपके लिए सबसे क्रॉस-ब्राउज़र संगत उदाहरण होगा:

document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';

मैं यह भी बताना चाहता हूं कि शैलियों को प्रबंधित करने का एक बहुत आसान तरीका एक सीएसएस वर्ग चयनकर्ता का उपयोग करना और अपनी शैलियों को बाहरी सीएसएस फाइलों में डालना है। न केवल आपका कोड अधिक रख-रखाव होगा, बल्कि आप वास्तव में अपने वेब डिज़ाइनरों से दोस्ती करेंगे!

document.getElementById("div_register").setAttribute("class","wide");

.wide {
    display:block;
    width:500px;
}

.hide {
    display:none;
}

.narrow {
    display:block;
    width:100px;
}

अब, मैं कई गुणों को कॉल करने के बजाय आसानी से एक वर्ग गुण, एक एकल गुण को जोड़ और हटा सकता हूं। इसके अलावा, जब आपका वेब डिज़ाइनर विस्तृत होने के अर्थ की परिभाषा को बदलना चाहता है, तो उसे आपके सुंदर रूप से बनाए गए जावास्क्रिप्ट कोड में आसपास घूमने जाने की आवश्यकता नहीं है। आपका जावास्क्रिप्ट कोड अछूता रहता है, फिर भी आपके आवेदन का विषय आसानी से अनुकूलित किया जा सकता है।

यह तकनीक आपके व्यवहार (जावास्क्रिप्ट), और आपकी प्रस्तुति (सीएसएस) से आपकी सामग्री (HTML) को अलग करने के नियम का पालन करती है।

— jmort253
स्रोत

1

क्या यह अन्य सभी शैली विशेषताओं को ओवरराइड नहीं करेगा? जैसा कि प्रश्न के लिए एक टिप्पणी में उल्लेख किया display: blockगया था , भी निर्धारित किया गया था।

— पॉवरमिच

2

शैली विशेषता का उपयोग करते समय सब कुछ एक बार में सेट करें। अपने स्वयं के परीक्षण किए गए और काम करने वाले कोड से मेरे उदाहरण में, मैंने display:block;cursor:pointer;cursor:handसभी को एक ही सेटआर्ट श्रद्धांजलि कॉल में रखा। यदि आप अपने जीवन को आसान बनाना चाहते हैं, तो jQuery की तरह एक प्रगतिशील जावास्क्रिप्ट पुस्तकालय का उपयोग करें। मेरे कोड में कच्चे जावास्क्रिप्ट का उपयोग करने का एकमात्र कारण यह है कि यह क्लाइंट वेबसाइटों पर एम्बेड कोड के लिए था, इसलिए वास्तविक वातावरण साइट से साइट पर अलग-अलग होंगे, और जंगल में पुस्तकालय के टकराव से बचने का सबसे आसान तरीका सिर्फ उनका उपयोग नहीं करना है।

— jmort253

1

मैंने एक और उदाहरण जोड़ा है जो वर्ग विशेषताओं का उपयोग करता है। यह तकनीक आपके व्यवहार (जावास्क्रिप्ट), और आपकी प्रस्तुति (सीएसएस) से आपकी सामग्री (HTML) को अलग करने के नियम का पालन करती है। यह स्टाइलिंग के वास्तविक विवरणों को दूर कर देता है क्योंकि यह एक आसान-से-काम के साथ क्लासनेम देता है।

— jmort253

@jmort: +1। लेकिन सटीकता के नाम पर, Chrome / FireFox / Safari सभी प्रश्न में विशेषताओं के हेरफेर का समर्थन करते हैं (उदाहरण के लिए: element.style.height, element.style. उपलब्धता, आदि)

— Daniel Szabo

हम्म, मुझे पता है कि मेरे अपने कोड में, IE7 के साथ अच्छा खेलने के लिए, मुझे कुछ बहुत ही विशिष्ट चरणों का पालन करना था जो बहुत दर्दनाक परीक्षण और त्रुटि के माध्यम से खोजे गए थे। यह हो सकता है कि IE7 ठीक से काम नहीं करता है। श्रद्धांजलि के साथ ... मुझे ठीक से याद नहीं है, इसलिए मैं इसे पाठक के लिए एक अभ्यास के रूप में छोड़ दूंगा और क्रोम / एफएफ, आदि के बारे में भाग को हटा दूंगा। मुझे पता है कि कोड काम करता है, भले ही मैं इसे सही ढंग से नहीं समझा रहा हूँ। :)

— jmort253

14

ये एक तत्व को शैली लागू करने के कई तरीके हैं। नीचे दिए गए उदाहरणों में से किसी एक को आज़माएं:

1. document.getElementById('div_register').className = 'wide';
  /* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';

— Valli69
स्रोत

1

अपने कोड में टाइपो को ठीक करें ("दस्तावेज़" आपके फ़ंक्शन की तर्ज पर 3 और 4 पर गलत लिखा गया है, और onclick इवेंट हैंडलर को पढ़ने के लिए बदलें: onclick = "show_update_profile ()) और फिर आप ठीक हो जाएंगे। आपको वास्तव में अनुसरण करना चाहिए। jmort की सलाह और बस 2 css क्लासेस सेट करें, जिन्हें आप जावास्क्रिप्ट के बीच स्विच करते हैं - यह आपके जीवन को बहुत आसान बना देगा और अपने आप को सभी अतिरिक्त टाइपिंग से बचा लेगा। आपके द्वारा किया गया टाइपो इस बात का एक आदर्श उदाहरण है कि यह बेहतर क्यों है। दृष्टिकोण।

ब्राउनी बिंदुओं के लिए, आपको अपने तत्वों को ईवेंट हैंडलर असाइन करने के लिए element.addEventListener भी देखना चाहिए ।

— डैनियल सज़ाबो
स्रोत

0

यदि आप javascript:उपसर्ग हटाते हैं और अज्ञात आईडी जैसे भागों को हटाते हैं'black_fade' अपने जावास्क्रिप्ट कोड से , तो यह फ़ायरफ़ॉक्स में काम करना चाहिए

संघनित उदाहरण:

<html>
    <head>
        <script type="text/javascript">
            function show_update_profile() {
               document.getElementById('div_register').style.height= "500px";
               document.getElementById('div_register').style.width= "500px";
               document.getElementById('div_register').style.display='block';
               return true;
           }
        </script>
        <style>
           /* just to show dimensions of div */
           #div_register
           {
                background-color: #cfc;
           }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="show_update_profile();" value="show"/>
        </div>
        <div id="div_register">
            <table>
                <tr>
                   <td>
                     welcome 
                   </td>
                </tr>
            </table>
        </div>
    </body>
</html>

— powerMicha
स्रोत

"जावास्क्रिप्ट:" को हटाने पर +1। यह वेब 1.0 के लंबे समय से चले आ रहे दिनों का एक पुराना निर्माण है।

— jmort253

फिर कृपया इसे अपने उदाहरण में जोड़ें, अन्यथा स्क्रिप्ट विफल हो जाएगी - btw: क्या आप Firebugफ़ायरफ़ॉक्स के लिए प्लगइन जानते हैं ? यह आपको बहुत मदद करेगा

— पावरमीचा

मेरी स्क्रिप्ट में कुछ भी गलत नहीं था ......... becaquse i एक पॉप अप बॉक्स का उपयोग कर रहा था .... जो कि ऑफटॉपिक था, क्योंकि मेरी स्क्रिप्ट ने जावास्क्रिप्ट के साथ-साथ सभी का अच्छी तरह से काम किया: यह सब अच्छा काम कर सकता है, हो सकता है इसके पुराने होने के कारण यह एक त्रुटि नहीं थी ... समस्या चौड़ाई को अद्यतन करने के साथ थी ... और jmort के समाधान ने मुझे समाधान का परिणाम निकालने में मदद की

— Saswat

ज़रूर। मैं केवल यह बताना चाहता था कि ये भाग उदाहरण में गायब थे, जो अन्य समस्याओं की ओर ले जाता है। तो अब कुछ भी ठीक नहीं है

— पॉवरमिच

-1

onclickएक बटन की विशेषता जावास्क्रिप्ट का एक स्ट्रिंग लेती है, न कि आपके द्वारा प्रदान की गई एक href। बस "जावास्क्रिप्ट:" भाग को हटा दें।

— jpsimons
स्रोत

-1

सावधान रहो span!

myspan.styles.width='100px' काम नहीं करना चाहता।

बदले spanएक करने के लिए div।

— एंडी बी
स्रोत

1

ऐसा इसलिए है क्योंकि spanडिफ़ॉल्ट रूप से एक इनलाइन तत्व है, और इसलिए इस पर किसी भी आकार का सेट नहीं माना जाएगा। करने के लिए अपने सीएसएस बदलने display: block, display: flexया display: inline-blockयह ठीक से सिर्फ एक तरह काम करने के लिए कारण होगा div(डिफ़ॉल्ट रूप से एक ब्लॉक तत्व)।

— डेनियल टी।

2

प्रश्न में एक अवधि का उल्लेख नहीं किया गया है , और किसी भी एक का उपयोग करने का सुझाव दिया गया है। मैं यह नहीं देखता कि यह उत्तर कैसे मदद करता है।

— विन्स बॉड्रेन

1

अजीब है, यह एक साल पहले तो यकीन नहीं था कि क्यों !! ^ _ ^

— एंडी बी

1

और बदलने के styles.widthलिए style.width। :)

— RiZKiT