Définition de la largeur et de la hauteur des DIV en JavaScript

Question

Définition de la largeur et de la hauteur des DIV en JavaScript

Demandé el 12 de Avril, 2012: Quand la question a-t-elle été
438218 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Tengo un div con id="div_register" . Je veux définir son width dynamiquement en JavaScript.

J'utilise le code suivant :

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

mais cette ligne de code ne fonctionne pas.

J'ai également essayé d'utiliser les unités px comme les suivantes, toujours pas de chance :

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

y

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

y

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

mais aucun de ces codes ne fonctionne pour moi.

Je ne sais pas ce qui ne va pas.

J'utilise 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>

Demandé el 12 de Avril, 2012 par Saswat

Answer 1

5 Réponses

Answer 2

268voto

jmort253 Points 16929

Les propriétés que vous utilisez peuvent ne pas fonctionner dans Firefox, Chrome et d'autres navigateurs non IE. Pour que cela fonctionne dans tous les navigateurs, je suggère également d'ajouter ce qui suit :

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

Pour des raisons de compatibilité croisée, vous devrez toujours utiliser la propriété . L'ordre peut également avoir de l'importance. Par exemple, dans mon code, lorsque je définis les propriétés de style avec JavaScript, je définis d'abord l'attribut de style, puis les propriétés :

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

Ainsi, l'exemple le plus compatible avec les différents navigateurs serait le suivant :

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

Je tiens également à souligner qu'une méthode beaucoup plus simple de gestion des styles consiste à utiliser un sélecteur de classe CSS et à placer vos styles dans des fichiers CSS externes. Non seulement votre code sera beaucoup plus facile à maintenir, mais vous deviendrez également ami avec vos concepteurs Web !

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

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

.hide {
    display:none;
}

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

Maintenant, je peux facilement ajouter et supprimer un attribut de classe, une seule propriété, au lieu d'appeler plusieurs propriétés. En outre, lorsque votre concepteur Web souhaite modifier la définition de ce que signifie être large, il n'a pas besoin d'aller fouiller dans votre code JavaScript magnifiquement maintenu. Votre code JavaScript reste intact, mais le thème de votre application peut être facilement personnalisé.

Cette technique suit la règle qui consiste à séparer votre contenu (HTML) de votre comportement (JavaScript), et de votre présentation (CSS).

Répondu el 12 de Avril, 2012 par jmort253 (16929 Points )

Answer 3

20voto

Valli69 Points 799

Il existe plusieurs façons d'appliquer un style à un élément. Essayez l'un des exemples ci-dessous :

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

Répondu el 12 de Avril, 2012 par Valli69 (799 Points )

Answer 4

2voto

ajax81 Points 3215

Corrigez les fautes de frappe dans votre code ( document est mal orthographié aux lignes 3 et 4 de votre fonction, et modifiez le gestionnaire d'événement onclick pour qu'il se lise comme suit : onclick="show_update_profile()" et vous serez bien. Le conseil de @jmort est bon - mettez simplement en place 2 classes css entre lesquelles vous basculez en javascript - cela rendra les choses plus faciles.

Vous pouvez également consulter élément.addEventListener pour affecter des gestionnaires d'événements à vos éléments.

Répondu el 12 de Avril, 2012 par ajax81 (3215 Points )

Answer 5

0voto

darkporter Points 7552

Le site onclick d'un bouton prend une chaîne de JavaScript, et non un href comme vous l'avez fourni. Il suffit de supprimer la partie "javascript :".

Répondu el 12 de Avril, 2012 par darkporter (7552 Points )

Answer 6

0voto

powerMicha Points 1620

Si vous retirez le javascript: et supprimer les parties pour les identifiants inconnus comme 'black_fade' à partir de votre code javascript, ceci devrait fonctionner dans firefox

Exemple condensé :

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

Répondu el 12 de Avril, 2012 par powerMicha (1620 Points )

Définition de la largeur et de la hauteur des DIV en JavaScript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Définition de la largeur et de la hauteur des DIV en JavaScript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: