Pertanyaan Menyetel lebar dan tinggi DIV di JavaScript


Saya punya div dengan id="div_register". Saya ingin mengaturnya width dinamis dalam JavaScript.

Saya menggunakan kode berikut ini:

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

tetapi baris kode ini tidak berfungsi.

Saya juga mencoba menggunakan unit px seperti yang berikut, tetap tidak ada keberuntungan:

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

dan

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

dan

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

tetapi tidak satu pun dari kode ini bekerja untuk saya.

Saya tidak tahu apa yang salah.

Saya menggunakan Mozilla Firefox.

EDIT

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

75
2018-04-12 06:02


asal


Jawaban:


Properti yang Anda gunakan mungkin tidak berfungsi di Firefox, Chrome, dan browser non-IE lainnya. Untuk membuat ini berfungsi di semua browser, saya juga menyarankan untuk menambahkan yang berikut:

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

Untuk kompatibilitas silang, Anda masih perlu menggunakan properti. Urutan mungkin juga penting. Misalnya, dalam kode saya, saat mengatur properti gaya dengan JavaScript, saya menetapkan atribut gaya terlebih dahulu, lalu saya mengatur properti:

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

Dengan demikian, contoh kompatibel lintas-browser yang paling cocok untuk Anda adalah:

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

Saya juga ingin menunjukkan bahwa cara yang lebih mudah dalam mengelola gaya adalah dengan menggunakan pemilih kelas CSS dan menempatkan gaya Anda di file CSS eksternal. Tidak hanya kode Anda akan lebih mudah dipelihara, tetapi Anda benar-benar akan berteman dengan desainer Web Anda!

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

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

.hide {
    display:none;
}

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

Sekarang, saya dapat dengan mudah hanya menambahkan dan menghapus atribut kelas, satu properti tunggal, daripada memanggil beberapa properti. Selain itu, ketika perancang Web Anda ingin mengubah definisi dari apa artinya menjadi lebar, dia tidak perlu mengaduk-aduk kode JavaScript Anda yang dipelihara dengan indah. Kode JavaScript Anda tetap tidak tersentuh, namun tema aplikasi Anda dapat dengan mudah disesuaikan.

Teknik ini mengikuti aturan memisahkan konten Anda (HTML) dari perilaku Anda (JavaScript), dan presentasi Anda (CSS).


166
2018-04-12 06:05



Ini adalah beberapa cara untuk menerapkan gaya ke elemen. Coba salah satu contoh di bawah ini:

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

12
2018-04-12 08:17



Perbaiki kesalahan ketik dalam kode Anda ("dokumen" dieja salah pada baris 3 & 4 dari fungsi Anda, dan ubah event handler onclick untuk membaca: onclick = "show_update_profile ()" dan kemudian Anda akan baik-baik saja. Anda harus benar-benar mengikuti jmort's saran dan hanya mengatur 2 kelas css yang Anda beralih antara di javascript - itu akan membuat hidup Anda lebih mudah dan menyelamatkan diri dari semua pengetikan ekstra. Kesalahan ketik yang telah Anda lakukan adalah contoh sempurna mengapa ini adalah lebih baik pendekatan.

Untuk poin brownies, Anda juga harus memeriksanya element.addEventListener untuk menetapkan penangan kejadian ke elemen Anda.


1
2018-04-12 07:01



Jika Anda menghapus javascript: awalan dan hapus bagian-bagian untuk id yang tidak dikenal seperti 'black_fade' dari kode javascript Anda, ini harus berfungsi di firefox

Contoh kental:

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

0
2018-04-12 06:50



Hati-hati span!

myspan.styles.width='100px' tidak mau bekerja.

Mengubah span ke a div.


0
2017-09-11 14:49



Itu onclick atribut tombol mengambil string JavaScript, bukan href seperti yang Anda berikan. Hapus saja bagian "javascript:".


-1
2018-04-12 06:28