การตั้งค่าความกว้างและความสูง DIV ใน JavaScript

108

ฉันมีกับdiv id="div_register"ฉันต้องการตั้งค่าwidthแบบไดนามิกใน JavaScript

ฉันใช้รหัสต่อไปนี้:

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;

แต่รหัสนี้ไม่ได้ผลสำหรับฉัน

ฉันไม่รู้ว่าเกิดอะไรขึ้น

ฉันใช้ Mozilla Firefox

แก้ไข

<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

— ศศวัต
แหล่งที่มา

คุณพยายามตั้งค่าความกว้างหลังจากonloadเหตุการณ์เกิดขึ้นหรือไม่?

— Cyclonecode

1

คุณตรวจสอบแล้วนั่นdiv_registerคือรหัสที่ถูกต้องขององค์ประกอบของคุณหรือไม่ อาจจะให้ html กับเราด้วย ... น่าstyle.width="500px";จะถูก

— powerMicha

ฉันได้ตั้งค่า document.getElementById ('div_register') style.display = 'block' แล้วตั้งค่า document.getElementById ('div_regsiter') style.width = '500px';

— Saswat

1

สำหรับสิ่งที่คุ้มค่าคุณพิมพ์คำว่า "เอกสาร" ในบรรทัดที่ 3 และ 4 ของฟังก์ชันของคุณซึ่งแน่นอนที่สุดจะทำให้ไม่สามารถใช้งานได้

— Daniel Szabo

1

ใช้onclick="show_update_profile()"แทนonclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

คุณสมบัติที่คุณใช้อาจใช้ไม่ได้ใน Firefox, Chrome และเบราว์เซอร์อื่น ๆ ที่ไม่ใช่ IE เพื่อให้สามารถใช้งานได้ในทุกเบราว์เซอร์ฉันขอแนะนำให้เพิ่มสิ่งต่อไปนี้:

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

สำหรับความเข้ากันได้ข้ามกันคุณจะยังคงต้องใช้คุณสมบัติ คำสั่งซื้ออาจมีความสำคัญ ตัวอย่างเช่นในรหัสของฉันเมื่อตั้งค่าคุณสมบัติสไตล์ด้วย JavaScript ฉันตั้งค่าแอตทริบิวต์สไตล์ก่อนจากนั้นจึงตั้งค่าคุณสมบัติ:

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';

ฉันยังต้องการชี้ให้เห็นว่าวิธีการจัดการสไตล์ที่ง่ายกว่ามากคือการใช้ตัวเลือกคลาส CSS และใส่สไตล์ของคุณในไฟล์ CSS ภายนอก ไม่เพียง แต่โค้ดของคุณจะดูแลรักษาได้มากขึ้นเท่านั้น แต่คุณจะได้เป็นเพื่อนกับนักออกแบบเว็บไซต์ของคุณด้วย!

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

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

.hide {
    display:none;
}

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

ตอนนี้ฉันสามารถเพิ่มและลบแอตทริบิวต์คลาสหนึ่งคุณสมบัติเดียวแทนที่จะเรียกคุณสมบัติหลายรายการ นอกจากนี้เมื่อนักออกแบบเว็บไซต์ของคุณต้องการเปลี่ยนคำจำกัดความของความหมายให้กว้างเขาหรือเธอไม่จำเป็นต้องไปเจาะลึกโค้ด JavaScript ที่ได้รับการดูแลอย่างสวยงาม โค้ด JavaScript ของคุณยังคงไม่ถูกแตะต้อง แต่คุณสามารถปรับแต่งธีมของแอปพลิเคชันของคุณได้อย่างง่ายดาย

เทคนิคนี้เป็นไปตามกฎของการแยกเนื้อหาของคุณ (HTML) ออกจากพฤติกรรมของคุณ (JavaScript) และการนำเสนอของคุณ (CSS)

— jmort253
แหล่งที่มา

1

สิ่งนี้จะไม่แทนที่แอตทริบิวต์สไตล์อื่น ๆ ทั้งหมดหรือไม่ ดังที่กล่าวไว้ในความคิดเห็นของคำถามdisplay: blockก็ถูกตั้งค่าเช่นกัน

— powerMicha

2

ตั้งค่าทุกอย่างพร้อมกันเมื่อใช้สไตล์แอตทริบิวต์ ในตัวอย่างของฉันจากโค้ดที่ทดสอบและใช้งานได้ฉันใส่display:block;cursor:pointer;cursor:handทั้งหมดไว้ในการเรียก setAttribute เดียวกัน หากคุณต้องการให้ชีวิตของคุณง่ายขึ้นให้ใช้ไลบรารี JavaScript แบบก้าวหน้าเช่น jQuery เหตุผลเดียวที่ฉันใช้ JavaScript ดิบในโค้ดของฉันเพราะมันใช้สำหรับฝังโค้ดบนเว็บไซต์ไคลเอนต์ดังนั้นสภาพแวดล้อมจริงจะแตกต่างกันไปในแต่ละไซต์และวิธีที่ง่ายที่สุดในการหลีกเลี่ยงความขัดแย้งของไลบรารีในไวลด์คือการไม่ใช้มัน

— jmort253

1

ฉันเพิ่มอีกตัวอย่างที่ใช้แอตทริบิวต์คลาส เทคนิคนี้เป็นไปตามกฎของการแยกเนื้อหาของคุณ (HTML) ออกจากพฤติกรรมของคุณ (JavaScript) และการนำเสนอของคุณ (CSS) นอกจากนี้ยังแยกรายละเอียดที่แท้จริงของการจัดแต่งทรงผมโดยให้ className ง่ายต่อการทำงาน

— jmort253

@jmort: +1. แต่ในนามของความถูกต้อง Chrome / FireFox / Safari ทั้งหมดสนับสนุนการจัดการแอตทริบิวต์ที่เป็นปัญหา (เช่น element.style.height, element.style.width ฯลฯ )

— Daniel Szabo

อืมฉันรู้ว่าในโค้ดของฉันเองเพื่อให้มันเล่นได้ดีกับ IE7 ฉันต้องทำตามขั้นตอนเฉพาะบางอย่างที่ค้นพบผ่านการลองผิดลองถูกที่เจ็บปวดมาก อาจเป็นไปได้ว่า IE7 ทำงานไม่ถูกต้องกับ setAttribute ... ฉันจำไม่ได้ว่าอย่างนั้นฉันจะปล่อยให้เป็นแบบฝึกหัดสำหรับผู้อ่านและจะลบส่วนที่เกี่ยวกับ chrome / FF ฯลฯ ฉันรู้รหัส ได้ผลแม้ว่าฉันจะอธิบายไม่ถูกก็ตาม :)

— 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';

— วัลลิ 69
แหล่งที่มา

1

แก้ไขการพิมพ์ผิดในโค้ดของคุณ ("document" สะกดผิดในบรรทัดที่ 3 และ 4 ของฟังก์ชันและเปลี่ยนตัวจัดการเหตุการณ์ onclick เป็นอ่าน: onclick = "show_update_profile ()" แล้วคุณจะสบายดีควรปฏิบัติตาม คำแนะนำของ jmort และเพียงแค่ตั้งค่าคลาส css 2 คลาสที่คุณสลับไปมาในจาวาสคริปต์ - มันจะทำให้ชีวิตของคุณง่ายขึ้นมากและช่วยตัวเองจากการพิมพ์พิเศษทั้งหมดการพิมพ์ผิดที่คุณได้กระทำเป็นตัวอย่างที่ดีว่าทำไมถึงดีกว่า แนวทาง

สำหรับจุดบราวนี่คุณควรตรวจสอบelement.addEventListenerเพื่อกำหนดตัวจัดการเหตุการณ์ให้กับองค์ประกอบของคุณ

— Daniel Szabo
แหล่งที่มา

0

หากคุณลบjavascript:คำนำหน้าและลบส่วนของรหัสที่ไม่รู้จักเช่น'black_fade'จากรหัสจาวาสคริปต์ของคุณสิ่งนี้จะใช้ได้ใน firefox

ตัวอย่างย่อ:

<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>

— อำนาจ
แหล่งที่มา

+1 ในการลบ "javascript:" นั่นเป็นโครงสร้างที่ล้าสมัยจากวันที่หายไปนานของ Web 1.0

— jmort253

จากนั้นโปรดเพิ่มลงในตัวอย่างของคุณมิฉะนั้นสคริปต์จะล้มเหลว - btw: คุณรู้จักFirebugปลั๊กอินสำหรับ Firefox หรือไม่? สิ่งนี้จะช่วยคุณได้มาก

— powerMicha

จริงไม่มีอะไรผิดพลาดในสคริปต์ของฉัน ......... เพราะฉันใช้กล่องป๊อปอัป .... นั่นเป็นเรื่องผิดปกติเพราะสคริปต์ของฉันทำงานได้ดีตลอดมาโดยใช้จาวาสคริปต์: มันทำงานได้ดีทั้งหมดอาจ มันล้าสมัย bt นี่ไม่ใช่ข้อผิดพลาด ... ปัญหาเกิดจากการอัปเดตความกว้างแบบไดนามิก ... และโซลูชันของ jmort ช่วยให้ฉันได้ผลลัพธ์

— Saswat

แน่นอน ฉันแค่อยากจะชี้ให้เห็นว่าชิ้นส่วนเหล่านี้ขาดหายไปในตัวอย่างซึ่งนำไปสู่ปัญหาอื่น ๆ ตอนนี้ทุกอย่าง

— เรียบร้อย

-1

onclickแอตทริบิวต์ของปุ่มใช้เวลาสตริงของ JavaScript ที่ไม่ได้เป็น href เช่นคุณให้ เพียงลบส่วน "javascript:" ออก

— jpsimons
แหล่งที่มา

-1

ระวังspan!

myspan.styles.width='100px' ไม่ต้องการทำงาน

เปลี่ยนspanเป็นdivไฟล์.

— แอนดี้บี
แหล่งที่มา

1

เนื่องจากspanเป็นองค์ประกอบแบบอินไลน์โดยค่าเริ่มต้นดังนั้นจึงไม่เป็นไปตามการกำหนดขนาดใด ๆ เปลี่ยน CSS ในการdisplay: block, display: flexหรือdisplay: inline-blockจะทำให้เกิดการทำงานอย่างถูกต้องเช่นเดียวกับdiv(องค์ประกอบบล็อกโดยค่าเริ่มต้น)

— Daniel T.

2

คำถามไม่เคยพูดถึงช่วงและไม่มีคำตอบที่แนะนำให้ใช้อย่างใดอย่างหนึ่ง ฉันไม่เห็นว่าคำตอบนี้ช่วยได้อย่างไร

— Vince Bowdren

1

แปลกนี่ก็ปีที่แล้วเลยไม่แน่ใจเหมือนกัน !! ^ _ ^

— Andy B

1

และเปลี่ยนstyles.widthเป็นstyle.width. :)

— RiZKiT