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

108

J'ai un divavec id="div_register". Je veux définir son widthdynamiquement en JavaScript.

J'utilise ce 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 pxcomme les suivantes, toujours pas de chance:

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

et

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

et

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

mais aucun de ce code ne fonctionne pour moi.

Je ne sais pas ce qui ne va pas.

J'utilise Mozilla Firefox.

ÉDITER

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

Avez-vous essayé de régler la largeur après que l' onloadévénement s'est produit?

— Cyclonecode

1

Avez-vous vérifié que div_registerc'est le bon identifiant de votre élément? Peut-être donnez-nous aussi du html ... ça style.width="500px";devrait être juste.

— powerMicha

j'ai défini document.getElementById ('div_register'). style.display = 'block', puis défini document.getElementById ('div_regsiter'). style.width = '500px';

— Saswat

1

Pour ce que ça vaut, vous avez des fautes de frappe dans le mot "document" aux lignes 3 et 4 de votre fonction ... ce qui l'empêcherait très certainement de fonctionner.

— Daniel Szabo

1

utiliser à la onclick="show_update_profile()"place deonclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

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 la compatibilité croisée, vous devrez toujours utiliser la propriété. L'ordre peut aussi avoir de l'importance. Par exemple, dans mon code, lors de la définition des propriétés de style avec JavaScript, je définis d'abord l'attribut de style, puis je définis 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 plusieurs navigateurs serait:

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 maintenable, mais vous vous lierez en fait à 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. De plus, lorsque votre concepteur Web veut changer la définition de ce que signifie être large, il n'a pas besoin de fouiller dans votre code JavaScript magnifiquement entretenu. Votre code JavaScript reste intact, mais le thème de votre application peut être facilement personnalisé.

Cette technique suit la règle de séparation de votre contenu (HTML) de votre comportement (JavaScript) et de votre présentation (CSS).

— jmort253
source

1

Cela ne remplacera-t-il pas tous les autres attributs de style? Comme mentionné dans un commentaire à la question, display: blocka également été défini.

— powerMicha

2

Définissez tout en même temps lors de l'utilisation de l'attribut style. Dans mon exemple de mon propre code testé et fonctionnel, je mets display:block;cursor:pointer;cursor:handtous dans le même appel setAttribute. Si vous voulez que votre vie soit plus facile, utilisez une bibliothèque JavaScript progressive comme jQuery. La seule raison pour laquelle j'ai utilisé du JavaScript brut dans mon code est parce que c'était pour intégrer du code sur les sites Web des clients, de sorte que les environnements réels différeraient d'un site à l'autre, et le moyen le plus simple d'éviter les conflits de bibliothèques dans la nature est de ne pas les utiliser.

— jmort253

1

J'ai ajouté un autre exemple qui utilise des attributs de classe. Cette technique suit la règle de séparation de votre contenu (HTML) de votre comportement (JavaScript) et de votre présentation (CSS). Il fait également abstraction des détails réels du style en lui donnant un nom de classe facile à utiliser.

— jmort253

@jmort: +1. Mais juste au nom de la précision, Chrome / FireFox / Safari prennent tous en charge la manipulation des attributs en question (ex: element.style.height, element.style.width, etc.)

— Daniel Szabo

Hmmm, je sais que dans mon propre code, pour qu'il fonctionne bien avec IE7, j'ai dû suivre des étapes très spécifiques qui ont été découvertes par des essais et des erreurs très douloureux. Il se peut qu'IE7 ne fonctionne pas correctement avec setAttribute ... Je ne me souviens pas exactement, alors je vais laisser cela comme un exercice pour le lecteur et supprimerai la partie concernant chrome / FF, etc. Je connais le code fonctionne, même si je ne l'explique pas correctement. :)

— jmort253

14

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

— Valli69
source

1

Corrigez les fautes de frappe dans votre code ("document" est mal orthographié sur les lignes 3 et 4 de votre fonction, et changez le gestionnaire d'événements onclick pour lire: onclick = "show_update_profile ()" et alors tout ira bien. Vous devriez vraiment suivre jmort et configurez simplement 2 classes css entre lesquelles vous basculez en javascript - cela vous faciliterait la vie et vous épargnerait toute saisie supplémentaire. Les fautes de frappe que vous avez commises sont un exemple parfait de pourquoi c'est mieux approche.

Pour les points brownie, vous devez également consulter element.addEventListener pour affecter des gestionnaires d'événements à vos éléments.

— Daniel Szabo
source

0

Si vous supprimez le javascript:préfixe et supprimez les parties pour les identifiants inconnus comme 'black_fade'de votre code javascript, cela 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>

— puissanceMicha
source

+1 sur la suppression du "javascript:". C'est une construction obsolète de l'époque révolue du Web 1.0.

— jmort253

Ensuite, veuillez l'ajouter à votre exemple, sinon le script échouera - btw: Connaissez-vous le Firebugplugin pour Firefox? Cela vous aidera beaucoup

— powerMicha

en fait, il n'y avait rien de mal dans mon script ......... parce que j'utilisais une fenêtre contextuelle .... c'était hors sujet, car mon script fonctionnait bien tout le long, en utilisant javascript: tout fonctionnait bien, peut-être être obsolète bt ce n'était pas une erreur ... le problème était de mettre à jour dynamiquement la largeur ... et la solution de jmort m'a aidé à trouver la solution

— Saswat

Sûr. Je voulais juste souligner que ces pièces manquaient dans l'exemple, ce qui conduit à d'autres problèmes. Alors tout va bien maintenant

— powerMicha

-1

L' onclickattribut d'un bouton prend une chaîne de JavaScript, pas un href comme vous l'avez fourni. Supprimez simplement la partie "javascript:".

— jpsimons
source

-1

Faites attention span!

myspan.styles.width='100px' ne veut pas travailler.

Remplacez le spanpar un div.

— Andy B
source

1

C'est parce que spanc'est un élément en ligne par défaut, et donc n'obéira à aucun dimensionnement défini dessus. Changer son CSS en display: block, display: flexou le display: inline-blockfera fonctionner correctement comme un div(un élément de bloc par défaut).

— Daniel T.

2

La question n'a jamais mentionné un intervalle , et aucune réponse n'a suggéré d'en utiliser une non plus. Je ne vois pas du tout comment cette réponse aide.

— Vince Bowdren

1

Bizarre, c'était il y a un an donc je ne sais pas pourquoi non plus !! ^ _ ^

— Andy B

1

Et changer styles.widthpour style.width. :)

— RiZKiT