Mengatur lebar dan tinggi DIV di JavaScript

108

Saya punya divdenganid="div_register" . Saya ingin mengaturnyawidth secara 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 pxseperti berikut, masih tidak berhasil:

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

dan

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

dan

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

tetapi tidak ada kode ini yang berfungsi 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>

javascript Saswat
sumber

Sudahkah Anda mencoba mengatur lebar setelah onloadacara selesai ?

Cyclonecode

1

Sudahkah Anda memeriksa, itu div_registeradalah id yang tepat dari elemen Anda? Mungkin memberi kami html juga ... style.width="500px";seharusnya benar.

powerMicha

saya telah menyetel document.getElementById ('div_register'). style.display = 'block', dan kemudian menyetel document.getElementById ('div_regsiter'). style.width = '500px';

Saswat

1

Untuk apa nilainya, Anda memiliki kesalahan ketik pada kata "dokumen" di baris 3 & 4 fungsi Anda ... yang pasti akan membuatnya tidak berfungsi.

Daniel Szabo

1

gunakan onclick="show_update_profile()"sebagai penggantionclick="javascript:show_update_profile()"

Tejasva Dhyani

227

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

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

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

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

Jadi, contoh paling kompatibel lintas-browser 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 metode yang lebih mudah dalam mengelola gaya adalah dengan menggunakan pemilih kelas CSS dan meletakkan gaya Anda di file CSS eksternal. Kode Anda tidak hanya jauh 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 menambahkan dan menghapus atribut kelas, satu properti tunggal, daripada memanggil beberapa properti. Selain itu, ketika desainer Web Anda ingin mengubah definisi tentang arti menjadi lebar, dia tidak perlu melihat-lihat 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).

jmort253
sumber

1

Bukankah ini akan menimpa semua atribut gaya lainnya? Seperti disebutkan dalam komentar atas pertanyaan display: blockitu , juga ditetapkan.

powerMicha

2

Atur semuanya sekaligus saat menggunakan atribut style. Dalam contoh saya dari kode saya sendiri yang diuji dan berfungsi, saya menempatkan display:block;cursor:pointer;cursor:handsemua dalam panggilan setAttribute yang sama. Jika Anda ingin hidup Anda lebih mudah, gunakan pustaka JavaScript progresif seperti jQuery. Satu-satunya alasan saya menggunakan JavaScript mentah dalam kode saya adalah karena itu untuk menyematkan kode di situs web klien, sehingga lingkungan sebenarnya akan berbeda dari situs ke situs, dan cara termudah untuk menghindari konflik perpustakaan di alam liar adalah dengan tidak menggunakannya.

jmort253

1

Saya menambahkan contoh lain yang menggunakan atribut kelas. Teknik ini mengikuti aturan memisahkan konten Anda (HTML) dari perilaku Anda (JavaScript), dan presentasi Anda (CSS). Ini juga mengabstraksi detail sebenarnya dari gaya dengan memberinya className yang mudah dikerjakan.

jmort253

@jmort: +1. Tetapi hanya atas nama akurasi, Chrome / FireFox / Safari semuanya mendukung manipulasi atribut yang dimaksud (misalnya: element.style.height, element.style.width, dll.)

Daniel Szabo

Hmmm, saya tahu bahwa dalam kode saya sendiri, untuk membuatnya berfungsi baik dengan IE7, saya harus mengikuti beberapa langkah yang sangat spesifik yang ditemukan melalui trial and error yang sangat menyakitkan. Mungkin IE7 tidak akan berfungsi dengan baik dengan setAttribute ... Saya tidak ingat persisnya, jadi saya akan membiarkan ini sebagai latihan untuk pembaca dan akan menghapus bagian tentang chrome / FF, dll. Saya tahu kodenya berfungsi, meskipun saya mungkin tidak menjelaskannya dengan benar. :)

jmort253

14

Ini adalah beberapa cara untuk menerapkan gaya ke sebuah elemen. Coba salah satu dari 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';

Valli69
sumber

1

Perbaiki kesalahan ketik pada kode Anda ("dokumen" dieja salah pada baris 3 & 4 fungsi Anda, dan ubah pengendali kejadian onclick menjadi: onclick = "show_update_profile ()" dan Anda akan baik-baik saja. Anda harus benar-benar mengikuti saran jmort dan cukup siapkan 2 kelas css yang Anda ganti dalam javascript - ini akan membuat hidup Anda jauh lebih mudah dan menyelamatkan diri Anda dari semua pengetikan tambahan. Kesalahan ketik yang Anda lakukan adalah contoh sempurna mengapa ini lebih baik pendekatan.

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

Daniel Szabo
sumber

0

Jika Anda menghapus javascript:awalan dan menghapus bagian untuk id yang tidak dikenal seperti'black_fade' dari kode javascript Anda, ini seharusnya 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>

powerMicha
sumber

+1 tentang menghapus "javascript:". Itu adalah konstruksi usang dari Web 1.0 yang sudah lama berlalu.

jmort253

Kemudian tambahkan ke contoh Anda, jika tidak skrip akan gagal - btw: Apakah Anda tahu Firebugplugin untuk Firefox? Ini akan banyak membantu Anda

powerMicha

sebenarnya tidak ada yang salah dalam skrip saya ......... karena saya menggunakan kotak pop-up .... itu offtopic, karena skrip saya bekerja dengan baik selama ini, menggunakan javascript: semuanya berfungsi dengan baik, semoga menjadi ketinggalan jaman bt ini bukan kesalahan ... masalahnya adalah dengan memperbarui dinamika lebar ... dan solusi jmort membantu saya menghasilkan solusi

Saswat

Tentu. Saya hanya ingin menunjukkan, bahwa bagian-bagian ini tidak ada dalam contoh, yang menyebabkan masalah lain. Jadi semuanya baik-baik saja sekarang

powerMicha

-1

The onclickatribut tombol mengambil string dari JavaScript, bukan href seperti yang Anda berikan. Hapus saja bagian "javascript:".

jpsimons.dll
sumber

-1

Hati-hati span !

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

Ubah spanmenjadi div.

Andy B
sumber

1

Ini karena spanmerupakan elemen sebaris secara default, dan oleh karena itu tidak akan mematuhi pengaturan ukuran apa pun di atasnya. Mengubah CSS-nya menjadi display: block,, display: flexatau display: inline-blockakan membuatnya bekerja dengan baik seperti div(elemen blok secara default).

Daniel T.

2

Pertanyaan tersebut tidak pernah menyebutkan rentang , dan tidak ada jawaban yang menyarankan untuk menggunakannya juga. Saya tidak melihat bagaimana jawaban ini membantu sama sekali.

Vince Bowdren

1

Aneh, ini setahun yang lalu jadi tidak yakin mengapa juga !! ^ _ ^

Andy B

1

Dan ubah styles.widthmenjadi style.width. :)

RiZKiT

Mengatur lebar dan tinggi DIV di JavaScript

Jawaban: