JavaScript'te DIV genişliğini ve yüksekliğini ayarlama

108

Bir divile var id="div_register". widthJavaScript'te dinamik olarak ayarlamak istiyorum .

Şu kodu kullanıyorum:

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

ancak bu kod satırı çalışmıyor.

Ayrıca pxaşağıdaki gibi birimleri kullanmayı denedim , yine de şans yok:

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

ve

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

ve

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

ama bu kodların hiçbiri benim için çalışmıyor.

Neyin yanlış gittiğini bilmiyorum.

Mozilla Firefox kullanıyorum.

DÜZENLE

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

onloadOlay meydana geldikten sonra genişliği ayarlamayı denediniz mi?

— Cyclonecode

1

Öğenizin div_registerdoğru kimliğini kontrol ettiniz mi? Belki de bize biraz html verin ... style.width="500px";doğru olmalı.

— powerMicha

document.getElementById ('div_register'). style.display = 'block' ayarladım ve sonra document.getElementById ('div_regsiter') ayarladım. style.width = '500px';

— Saswat

1

Değeri ne olursa olsun, işlevinizin 3. ve 4. satırlarında "belge" kelimesinde yazım hataları var ... bu kesinlikle çalışmasını engelleyecektir.

— Daniel Szabo

1

onclick="show_update_profile()"yerine kullanınonclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

Kullandığınız özellikler Firefox, Chrome ve diğer IE olmayan tarayıcılarda çalışmayabilir. Bunun tüm tarayıcılarda çalışmasını sağlamak için aşağıdakileri de eklemenizi öneririm:

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

Çapraz uyumluluk için, yine de özelliği kullanmanız gerekecektir. Düzen de önemli olabilir. Örneğin, kodumda, JavaScript ile stil özelliklerini ayarlarken, önce style niteliğini, ardından özellikleri ayarlarım:

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

Bu nedenle, sizin için tarayıcılar arası en uyumlu örnek şudur:

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

Ayrıca, stilleri yönetmenin çok daha kolay bir yönteminin bir CSS sınıf seçici kullanmak ve stillerinizi harici CSS dosyalarına koymak olduğunu belirtmek isterim. Kodunuzun bakımı çok daha kolay olmakla kalmayacak, aynı zamanda Web tasarımcılarınızla arkadaş olacaksınız!

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

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

.hide {
    display:none;
}

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

Artık, birden çok özelliği çağırmak yerine, bir sınıf özelliğini, tek bir özelliği kolayca ekleyip kaldırabiliyorum. Ek olarak, Web tasarımcınız geniş olmanın ne anlama geldiğinin tanımını değiştirmek istediğinde, güzelce korunan JavaScript kodunuzla uğraşmasına gerek kalmaz. JavaScript kodunuza dokunulmadan kalır, ancak uygulamanızın teması kolayca özelleştirilebilir.

Bu teknik, içeriğinizi (HTML) davranışınızdan (JavaScript) ve sunumunuzdan (CSS) ayırma kuralını izler.

— jmort253
kaynak

1

Bu, diğer tüm stil niteliklerini geçersiz kılmayacak mı? Soruya yapılan bir yorumda belirtildiği gibi display: block, ayrıca ayarlandı.

— powerMicha

2

Style özelliğini kullanırken her şeyi bir kerede ayarlayın. Kendi test edilmiş ve çalışan display:block;cursor:pointer;cursor:handkodumdaki örneğimde, hepsini aynı setAttribute çağrısına koydum . Hayatınızın daha kolay olmasını istiyorsanız, jQuery gibi aşamalı bir JavaScript kitaplığı kullanın. Kodumda ham JavaScript kullanmamın tek nedeni, kodun istemci web sitelerine yerleştirilmesi için olması, dolayısıyla gerçek ortamların siteden siteye farklılık göstermesi ve vahşi ortamda kütüphane çakışmalarını önlemenin en kolay yolu onları kullanmamaktır.

— jmort253

1

Sınıf niteliklerini kullanan başka bir örnek ekledim. Bu teknik, içeriğinizi (HTML) davranışınızdan (JavaScript) ve sunumunuzdan (CSS) ayırma kuralını izler. Ayrıca, stilin gerçek ayrıntılarını, çalışması kolay bir className vererek soyutlar.

— jmort253

@jmort: +1. Ancak, doğruluk adına, Chrome / FireFox / Safari'nin tümü, söz konusu özelliklerin değiştirilmesini destekler (örn: element.style.height, element.style.width, vb.)

— Daniel Szabo

Hmmm, biliyorum ki kendi kodumda, IE7 ile iyi oynamasını sağlamak için, çok acı verici deneme yanılma yoluyla keşfedilen çok özel bazı adımları izlemem gerekiyordu. IE7, setAttribute ile düzgün çalışmayabilir ... Tam olarak hatırlamıyorum, bu yüzden bunu okuyucu için bir alıştırma olarak bırakacağım ve chrome / FF vb. İle ilgili kısmı kaldıracağım. Kodu biliyorum doğru açıklamıyor olsam bile çalışıyor. :)

— jmort253

14

Bunlar, bir öğeye stil uygulamanın birkaç yoludur. Aşağıdaki örneklerden herhangi birini deneyin:

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
kaynak

1

Kodunuzdaki yazım hatalarını düzeltin (işlevinizin 3. ve 4. satırlarında "belge" yanlış yazılır ve onclick olay işleyicisini okumak için değiştirin: onclick = "show_update_profile ()" ve sonra iyi olacaksınız. Gerçekten takip etmelisiniz jmort'un tavsiyesi ve sadece javascript'te geçiş yapabileceğiniz 2 css sınıfı oluşturun - bu, hayatınızı çok daha kolaylaştırır ve kendinizi tüm ekstra yazımlardan kurtarır. Yaptığınız yazım hataları, bunun neden daha iyi olduğuna dair mükemmel bir örnektir. yaklaşmak.

Kek puanları için, öğelerinize olay işleyicileri atamak için element.addEventListener'a da göz atmalısınız .

— Daniel Szabo
kaynak

0

Eğer kaldırırsanız javascript:öneki ve benzeri bilinmeyen kimlikleri parçaları kaldırmak 'black_fade'için javascript koddan, bu firefox çalışması gerekir

Yoğun örnek:

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

"Javascript:" kaldırıldığında +1. Bu, Web 1.0'ın uzun süredir devam eden günlerinden kalma modası geçmiş bir yapıdır.

— jmort253

O zaman lütfen bunu örneğinize ekleyin, aksi takdirde komut dosyası başarısız olur - btw: FirebugFirefox eklentisini biliyor musunuz ? Bu size çok yardımcı olacaktır

— powerMicha

aslında betiğimde yanlış bir şey yoktu ......... çünkü açılır kutu kullanıyordum .... bu konu dışı, çünkü betiğim her zaman iyi çalıştı, javascript kullanarak: her şey yolunda gitti, olabilir onun bu wasnt bt bir hata güncelliğini yitirmiş ... sorun genişliği dynamicaly güncellenmesi ile ... ve jmort çözümü bana sonuç çözümü yardımcı

— Saswat

Elbette. Sadece şunu belirtmek istedim, örnekte bu parçalar eksikti, bu da başka sorunlara yol açıyor. Yani her şey

— yolunda

-1

onclickBir düğmeye nitelik JavaScript bir dize alır, değil bir href sağladığınız gibi. "Javascript:" bölümünü kaldırmanız yeterlidir.

— jpsimons
kaynak

-1

Dikkatli olun span!

myspan.styles.width='100px' çalışmak istemiyor.

Change spana div.

— Andy B
kaynak

1

Bunun nedeni span, varsayılan olarak bir satır içi öğe olmasıdır ve bu nedenle üzerindeki herhangi bir boyutlandırma ayarına uymaz. Onun CSS değiştirme display: block, display: flexya display: inline-blockbu sadece bir gibi düzgün çalışması neden olur div(varsayılan olarak bir blok elemanı).

— Daniel T.

2

Soru hiçbir zaman bir aralıktan bahsetmedi ve hiçbir yanıtın da kullanılması önerilmedi. Bu cevabın nasıl yardımcı olduğunu hiç anlamıyorum.

— Vince Bowdren

1

Garip, bu bir yıl önceydi, bu yüzden neden de emin değilim !! ^ _ ^

— Andy B

1

Ve değiştirmek styles.widthiçin style.width. :)

— RiZKiT