Frage Einstellen von DIV Breite und Höhe in JavaScript


Ich habe ein div mit id="div_register". Ich möchte es einstellen width dynamisch in JavaScript.

Ich verwende diesen folgenden Code:

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

aber diese Codezeile funktioniert nicht.

Ich habe auch versucht, die Einheiten zu benutzen px wie das Folgende, immer noch kein Glück:

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

und

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

und

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

aber nichts von diesem Code funktioniert für mich.

Ich weiß nicht, was schief läuft.

Ich benutze Mozilla Firefox.

BEARBEITEN

<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


Ursprung


Antworten:


Die von Ihnen verwendeten Eigenschaften funktionieren möglicherweise nicht in Firefox, Chrome und anderen Nicht-IE-Browsern. Damit dies in allen Browsern funktioniert, empfehle ich Folgendes hinzuzufügen:

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

Um die Kompatibilität zu gewährleisten, müssen Sie die Eigenschaft weiterhin verwenden. Ordnung kann auch von Bedeutung sein. Zum Beispiel setze ich in meinem Code beim Festlegen von Stileigenschaften mit JavaScript zuerst das Attribut style und dann die Eigenschaften:

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

Daher wäre das für Sie am meisten Browser-kompatible Beispiel:

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

Ich möchte auch darauf hinweisen, dass eine viel einfachere Methode zum Verwalten von Stilen darin besteht, einen CSS-Klassenselektor zu verwenden und Ihre Stile in externe CSS-Dateien einzufügen. Nicht nur, dass Ihr Code viel wartbarer ist, Sie werden sich auch mit Ihren Webdesignern anfreunden!

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

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

.hide {
    display:none;
}

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

Jetzt kann ich einfach ein Klassenattribut, eine einzelne Eigenschaft, hinzufügen und entfernen, anstatt mehrere Eigenschaften aufzurufen. Wenn Ihr Webdesigner die Definition dessen ändern möchte, was es bedeutet, breit zu sein, muss er oder sie nicht in Ihrem gut gepflegten JavaScript-Code stöbern. Ihr JavaScript-Code bleibt unberührt, aber das Thema Ihrer Anwendung kann leicht angepasst werden.

Diese Technik folgt der Regel, Ihren Inhalt (HTML) von Ihrem Verhalten (JavaScript) und Ihrer Präsentation (CSS) zu trennen.


166
2018-04-12 06:05



Dies sind mehrere Möglichkeiten, um Stil auf ein Element anzuwenden. Versuchen Sie eines der folgenden Beispiele:

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



Korrigieren Sie die Tippfehler in Ihrem Code ("Dokument" ist in den Zeilen 3 und 4 Ihrer Funktion falsch geschrieben und ändern Sie den onclick-Ereignishandler, um zu lesen: onclick = "show_update_profile ()" und dann geht es Ihnen gut. Sie sollten wirklich folgen jmort's rat und stelle einfach 2 css-klassen auf, zwischen denen du in javascript umschaltest - es würde dir das leben viel einfacher machen und dich vor all den zusätzlichen tipps retten.die typos, die du begangen hast, sind ein perfektes beispiel dafür, warum dies das bessere ist Ansatz.

Für Brownie-Punkte sollten Sie auch auschecken element.addEventListener zum Zuweisen von Ereignishandlern zu Ihren Elementen.


1
2018-04-12 07:01



Wenn Sie das entfernen javascript: Präfix und entfernen Sie die Teile für die unbekannten IDs wie 'black_fade' von Ihrem JavaScript-Code sollte dies in Firefox funktionieren

Verkürztes Beispiel:

<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



Sei vorsichtig bei span!

myspan.styles.width='100px' will nicht arbeiten.

Ändere das span zu einem div.


0
2017-09-11 14:49



Das onclick Attribut einer Schaltfläche nimmt eine Zeichenfolge von JavaScript, nicht eine href wie Sie bereitgestellt. Entfernen Sie einfach den "javascript:" Teil.


-1
2018-04-12 06:28