Festlegen der Breite und Höhe von DIV in JavaScript

108

Ich habe eine divmit id="div_register". Ich möchte es widthdynamisch in JavaScript einstellen .

Ich verwende diesen folgenden Code:

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

Diese Codezeile funktioniert jedoch nicht.

Ich habe auch versucht, die Einheiten pxwie folgt zu verwenden, 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 keiner dieser Codes funktioniert für mich.

Ich weiß nicht, was falsch 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>

javascript Saswat
quelle

Haben Sie versucht, die Breite nach dem onloadEreignis einzustellen?

Cyclonecode

1

Haben Sie überprüft, ob dies div_registerdie richtige ID Ihres Elements ist? Vielleicht geben Sie uns auch etwas HTML ... style.width="500px";sollte richtig sein.

PowerMicha

Ich habe document.getElementById ('div_register'). style.display = 'block' gesetzt und dann document.getElementById ('div_regsiter') gesetzt. style.width = '500px';

Saswat

1

Für was es wert ist, haben Sie Tippfehler im Wort "Dokument" in den Zeilen 3 und 4 Ihrer Funktion ... was definitiv verhindern würde, dass es funktioniert.

Daniel Szabo

1

Verwenden Sie onclick="show_update_profile()"anstelle vononclick="javascript:show_update_profile()"

Tejasva Dhyani

227

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 außerdem Folgendes hinzuzufügen:

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

Aus Gründen der Kreuzkompatibilität müssen Sie die Eigenschaft weiterhin verwenden. Bestellung kann auch wichtig sein. Wenn ich beispielsweise in meinem Code Stileigenschaften mit JavaScript festlege, lege ich zuerst das Stilattribut und dann die Eigenschaften fest:

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

Das für Sie am besten browserübergreifende Beispiel wäre daher:

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-Klassen-Selektor zu verwenden und Ihre Stile in externen CSS-Dateien abzulegen. Ihr Code ist nicht nur viel wartbarer, sondern 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 nicht in Ihrem wunderschön gepflegten JavaScript-Code herumstöbern. Ihr JavaScript-Code bleibt unberührt, das Thema Ihrer Anwendung kann jedoch problemlos angepasst werden.

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

jmort253
quelle

1

Wird dies nicht alle anderen Stilattribute überschreiben? Wie in einem Kommentar zur Frage erwähnt, display: blockwurde auch festgelegt.

PowerMicha

2

Stellen Sie alles auf einmal ein, wenn Sie das Stilattribut verwenden. In meinem Beispiel aus meinem eigenen getesteten und funktionierenden Code habe ich display:block;cursor:pointer;cursor:handalle in denselben setAttribute-Aufruf eingefügt. Wenn Sie möchten, dass Ihr Leben einfacher wird, verwenden Sie eine progressive JavaScript-Bibliothek wie jQuery. Der einzige Grund, warum ich in meinem Code rohes JavaScript verwendet habe, ist, dass es zum Einbetten von Code in Client-Websites verwendet wurde, sodass sich die tatsächlichen Umgebungen von Site zu Site unterscheiden. Der einfachste Weg, Bibliothekskonflikte in freier Wildbahn zu vermeiden, besteht darin, sie einfach nicht zu verwenden.

jmort253

1

Ich habe ein weiteres Beispiel hinzugefügt, das Klassenattribute verwendet. Diese Technik folgt der Regel, Ihren Inhalt (HTML) von Ihrem Verhalten (JavaScript) und Ihrer Präsentation (CSS) zu trennen. Es abstrahiert auch die tatsächlichen Details des Stils, indem es ihm einen einfach zu bearbeitenden Klassennamen gibt.

jmort253

@jmort: +1. Aber nur im Namen der Genauigkeit unterstützen Chrome / FireFox / Safari die Manipulation der fraglichen Attribute (z. B. element.style.height, element.style.width usw.)

Daniel Szabo

Hmmm, ich weiß, dass ich in meinem eigenen Code einige sehr spezifische Schritte ausführen musste, die durch sehr schmerzhaftes Ausprobieren entdeckt wurden, damit es mit IE7 gut funktioniert. Es könnte sein, dass IE7 mit setAttribute nicht richtig funktioniert ... Ich erinnere mich nicht genau, daher überlasse ich dies dem Leser als Übung und entferne den Teil über Chrome / FF usw. Ich kenne den Code funktioniert, auch wenn ich es vielleicht nicht richtig erkläre. :)

jmort253

14

Dies sind verschiedene Möglichkeiten, um Stil auf ein Element anzuwenden. Probieren Sie eines der folgenden Beispiele aus:

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
quelle

1

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 in "onclick =" show_update_profile () ". Dann ist alles in Ordnung. Sie sollten wirklich folgen Der Rat von jmort und das Einrichten von 2 CSS-Klassen, zwischen denen Sie in Javascript wechseln - dies würde Ihr Leben viel einfacher machen und Sie vor all dem zusätzlichen Tippen bewahren. Die Tippfehler, die Sie begangen haben, sind ein perfektes Beispiel dafür, warum dies der bessere ist Ansatz.

Für Brownie-Punkte sollten Sie auch element.addEventListener überprüfen, um Ihren Elementen Ereignishandler zuzuweisen .

Daniel Szabo
quelle

0

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

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

powerMicha
quelle

+1 beim Entfernen des "Javascript:". Das ist ein veraltetes Konstrukt aus den vergangenen Tagen von Web 1.0.

jmort253

Dann fügen Sie es bitte Ihrem Beispiel hinzu, sonst schlägt das Skript fehl - übrigens: Kennen Sie das FirebugPlugin für Firefox? Dies wird Ihnen sehr helfen

powerMicha

Eigentlich war nichts falsch in meinem Skript ......... weil ich ein Popup-Feld verwendet habe .... das war offtopic, weil mein Skript die ganze Zeit gut funktioniert hat, mit Javascript: es hat alles gut funktioniert, vielleicht Seien Sie veraltet, aber dies war kein Fehler ... das Problem bestand darin, die Breite dynamisch zu aktualisieren ... und die Lösung von jmort half mir, die Lösung zu finden

Saswat

Sicher. Ich wollte nur darauf hinweisen, dass diese Teile im Beispiel fehlten, was zu anderen Problemen führt. Also ist jetzt

alles in

-1

Das onclickAttribut einer Schaltfläche verwendet eine JavaScript-Zeichenfolge, keine von Ihnen angegebene href. Entfernen Sie einfach den Teil "Javascript:".

jpsimons
quelle

-1

Sei vorsichtig span!

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

Ändern Sie die spanzu a div.

Andy B.
quelle

1

Dies liegt daran, dass spanes sich standardmäßig um ein Inline-Element handelt und daher keine darauf festgelegten Größen eingehalten werden. Ändern seine CSS display: block, display: flexoder display: inline-blockbewirkt , dass es wie ein richtig nur arbeiten div(ein Block - Element Standard).

Daniel T.

2

In der Frage wurde nie eine Spanne erwähnt , und es wurde auch keine Antwort vorgeschlagen, eine zu verwenden. Ich sehe nicht, wie diese Antwort überhaupt hilft.

Vince Bowdren

1

Seltsam, das war vor einem Jahr, also nicht sicher warum auch !! ^ _ ^

Andy B

1

Und wechseln Sie styles.widthzu style.width. :)

RiZKiT

Festlegen der Breite und Höhe von DIV in JavaScript

Antworten: