Dynamisch Erstellen und Löschen von Div-tag mit Javascript

Ich will 3 Div-tags, die Dynamisch, wenn ich drücken Sie auf 3 verschiedenen Tasten (Rot, Grün, Blau).. Wenn ich drücken Sie die Rote ich will die Höhe der 'roten' div auf die Größe von meinem Bildschirm, so dass die ganze Seite wird rot sein, und wenn ich drücken Sie die Grüne möchte ich die Höhe der 'roten' div zu 50% von meinem Bildschirm, und die anderen 50% des Bildschirms sollte belegt werden, die von anderen div (das ist Grün)..

Und schließlich, wenn ich drücken Sie die Blaue Taste, ich will, dass Alle divs auf dem Bildschirm erscheint mit der gleichen Höhe...

Ich bin in der Lage zu schaffen, die divs, aber ich kann nicht löschen Sie die zuvor erstellten div, wenn ich drücken Sie die Rote Taste, nach drücken aller drei Tasten...

Hier ist der code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Ass 2</title>

        <script type="text/javascript">

        function fblue() {
            //document.bgColor = 'lightblue';

            selc=document.getElementById("first");
            divBlue=document.getElementById("one");
            myPara.removeChild(divBlue);



             selc=document.getElementById("first");

             divBlue=document.createElement("div");
             divBlue.id = "one";
             divBlue.style.backgroundColor = "lightblue";
             divBlue.style.height = "610px"
             divBlue.innerHTML = "dv tag created successfully";

             selc.appendChild(divBlue);
        }

        function fgreen() {

            selc=document.getElementById("first");
            divBlue=document.getElementById("one");


            divBlue.id = "one";
            divBlue.style.backgroundColor = "lightblue";
            divBlue.style.height = "305px"
            divBlue.innerHTML = "dv tag created successfully";
            selc.appendChild(divBlue);

            divGreen=document.createElement("div");
            divGreen.id = "one";
            divGreen.style.backgroundColor = "lightgreen";
            divGreen.style.height = "305px"
            divGreen.innerHTML = "dv tag created successfully";
            selc.appendChild(divGreen);

            //document.bgColor = ''; 
        }

        function fred() {

            document.getElementById("one").style.backgroundColor = 'lightblue';
            document.getElementById("one").style.width = '1104px';
            document.getElementById("one").style.height = '185px';

            document.getElementById("two").style.backgroundColor = 'red';
            document.getElementById("two").style.width = '1104px';
            document.getElementById("two").style.height = '185px';

            document.getElementById("three").style.backgroundColor = 'lightgreen';
            document.getElementById("three").style.width = '1104px';
            document.getElementById("three").style.height = '185px';
            document.bgColor = ''; 
        }

        </script>
    </head>
    <body style="margin: 0px;">
        <div style="height: 0px;" id="first"></div>

        <div id="four" style="margin-left: 415px; margin-top: 500px">
            <form>
                <input type="button" name="blu" value="Blue" onclick="javascript:fblue();">
                <input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();">
                <input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();">
            </form>
        </div>
    </body>
</html>
  • Titel ist sehr Interessant.
  • wie sind Sie auf die Berechnung der Höhen für die drei divs
  • wenn ich Sie wäre würde ich Lesen answers.oreilly.com/topic/... bevor Sie sich Gedanken über divs und Größen
  • WOW!!!! Menschen sind schon Bewertung meine Frage -4 ! Was ist meine Schuld?? Das einzige problem, das ich bin gerade jetzt gegenübersteht, ist auch nach der Verwendung von "element.removeChild(child); es wird nicht gelöscht....... Dies hat mich eine Frage hier stellen... Mein Fehler..
  • denn die Art und Weise, die Sie eingefügt haben, Ihr code war wirklich schlecht.
  • Ich habe immer Probleme einfügen den code hier.. Warum kann es nicht einfach sein wie andere Websites, einfügen einige code in quotess??
  • Es ist sehr einfach, fügen Sie einfach Ihren code alle markieren und dann in der text-editor, klicken Sie auf die Anführungszeichen und Sie sind fertig. Sie können auch die Vorschau beim posten Frage

InformationsquelleAutor Nayeem Junaid | 2012-11-10
  1. 4
      document.createElement("div");

    wird, erstellen Sie ein div-dynamiclly

    var oldChild = element.removeChild(child);
element.removeChild(child);

    Entfernt den untergeordneten Knoten aus der DOM. Gibt entfernt Knoten.

    • warum erstellen Sie eine variable "oldChild", wenn Sie nicht verwenden es?
    • In javascript, entfernen Sie das Kind finden Sie das übergeordnete Element dieses Elements. Wenn Sie können mir sagen, wie Sie haben, berechnen Sie die Höhen deines divs. Ich kann Ihnen zeigen, wie Sie hinzufügen und entfernen in einem Turnschuh.
    • Vielen Dank.. Mein problem ist gelöst..
    • möglicherweise möchten Sie die Antwort akzeptieren und erlangen Privilegien
    InformationsquelleAutor defau1t
Schreibe einen Kommentar