Leute, ich möchte eine Div-Breite und -Höhe auf 100% festlegen. Das Problem ist jedoch, dass sich div in einem Wrapper mit einer festen Breite befindet.

Ich habe eine Schaltfläche über dem div, mit der onclick = "" das div veranlasst, seine Klasse mit voller Breite und Höhe zu ändern. Ich möchte dieses Div in der oberen linken Ecke des Fensters positionieren. Mein Code ist

<html>
<head>
    <title>Javascript Change CSS Class of Div tag</title>

    <style type="text/css">

    #wrapper
    {
        width:75%;
        height:75%;
        margin:0 auto;
    }
    .minimize {
        color : red;
        width:500px;
        height:200px;
        background:#474747;
        float:left;
     } 

     .maximize {
        color : blue;
        width:100%;
        height:100%;
        float:left;
        background:#ccc;
     }

    </style>

    <script language="javascript" type="text/javascript">

        function changeCssClass(navlink)
        {
            if(document.getElementById(navlink).className=='minimize')
            {
                document.getElementById(navlink).className = 'maximize';
            }
            else
            {
                document.getElementById(navlink).className = 'minimize';
            }
        }

    </script>

</head>
<body>   <div id="wrapper">
        <div  id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
        </div>
</body>
</html>

Aber ich möchte, dass es mit Wrapper so aussieht

<html>
<head>
    <title>Javascript Change CSS Class of Div tag</title>

    <style type="text/css">


    .minimize {
        color : red;
        width:500px;
        height:200px;
        background:#474747;
        float:left;
     } 

     .maximize {
        color : blue;
        width:100%;
        height:100%;
        float:left;
        background:#ccc;
     }



</style>

    <script language="javascript" type="text/javascript">

        function changeCssClass(navlink)
        {
            if(document.getElementById(navlink).className=='minimize')
            {
                document.getElementById(navlink).className = 'maximize';
            }
            else
            {
                document.getElementById(navlink).className = 'minimize';
            }
        }

    </script>

</head>
<body>   
        <div  id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
</body>
</html>

Wird hier jemand helfen ....

Wenn jemand einen Vorschlag hat?

5
Vivek Dragon 9 Okt. 2012 im 10:23

7 Antworten

Beste Antwort

Ich denke, das war es, wonach Sie gesucht haben, aber es war schwer zu sagen, weil Sie nicht genau angegeben haben, welche Zustände für .minimize und .maximize gehalten werden sollen.

Beachten Sie, dass sich das Javascript wesentlich von Ihrem Original unterscheidet.

Da 'class' ein Attribut für DOM-Elemente ist, sollte mit getAttribute und setAttribute darauf zugegriffen werden. Es gab einen sehr, sehr alten Fehler in IE6, durch den Javascript nur über className auf die Klassen eines Elements zugreifen konnte, aber das ist nicht mehr der Fall.

Beachten Sie außerdem, wie ich mit dem Klassenattribut umgehe. Da Sie für ein Element mehrere Klassen angeben können, berücksichtigt dieser Code dies. Sie können sicher weitere Klassen hinzufügen, ohne mit Maximieren und Minimieren zu zappeln.

Das zweite, was zu sehen ist, ist das CSS. Position verwenden: fest verriegelt das Element in Position, unabhängig vom Bildlaufwert. In diesem Beispiel gibt es zwei Möglichkeiten, das div auf Vollbild einzustellen. Die erste ist die Angabe von Breite und Höhe bei 100%. Dies ist jedoch spröde.

Es ist besser, oben, rechts, unten und links auf 0 zu setzen. Dies gibt Ihnen mehr Kontrolle. Angenommen, Sie möchten einen dünnen Rand um die Kanten. Anstatt sich Gedanken über das Mischen von oben und links mit Breite und Höhe zu machen, können Sie einfach einen Pixel- oder Prozentwert für die 4 Eigenschaften angeben, die ich erwähnt habe, um ein einfaches, einheitliches Erscheinungsbild zu erhalten.

4
Vinoth 29 Okt. 2012 im 11:43

Ich habe Berkers Geige überprüft und es wird Ihr Problem beheben. Sowmya benutzt diese Geige, aber ich habe ein paar Änderungen vorgenommen. Schauen Sie sich das an:

Da class ein Attribut für DOM-Elemente ist, sollte mit getAttribute und setAttribute darauf zugegriffen werden. Es gab einen sehr, sehr alten Fehler in IE6, durch den Javascript nur über className auf die Klassen eines Elements zugreifen konnte, aber das ist nicht mehr der Fall.

3
Emil 21 Okt. 2012 im 19:20

Entfernen Sie margin:0 auto aus der Wrapper-Klasse

Überprüfen Sie dies http://jsfiddle.net/PAj39/

1
James 13 Okt. 2012 im 09:03

Stellen Sie einfach die Div-Breite ein: 100%; mit Position: fest; dazu.

Aber der Wrapper muss Position haben: absolut; Eigentum

0
Karthikeyan.A 27 Okt. 2012 im 05:55

Schauen Sie sich diese Geige an, http://jsfiddle.net/Tv2pP/7/

Ich denke, das war es, wonach Sie gesucht haben, aber es war schwer zu sagen, weil Sie nicht genau angegeben haben, welche Zustände für .minimize und .maximize gehalten werden sollen.

Beachten Sie, dass sich das Javascript wesentlich von Ihrem Original unterscheidet.

Da 'class' ein Attribut für DOM-Elemente ist, sollte mit getAttribute und setAttribute darauf zugegriffen werden. Es gab einen sehr, sehr alten Fehler in IE6, durch den Javascript nur über className auf die Klassen eines Elements zugreifen konnte, aber das ist nicht mehr der Fall.

Beachten Sie außerdem, wie ich mit dem Klassenattribut umgehe. Da Sie für ein Element mehrere Klassen angeben können, berücksichtigt dieser Code dies. Sie können sicher weitere Klassen hinzufügen, ohne mit Maximieren und Minimieren zu zappeln.

Das zweite, was zu sehen ist, ist das CSS. Position verwenden: fest verriegelt das Element in Position, unabhängig vom Bildlaufwert. In diesem Beispiel gibt es zwei Möglichkeiten, das div auf Vollbild einzustellen. Die erste ist die Angabe von Breite und Höhe bei 100%. Dies ist jedoch spröde.

Es ist besser, oben, rechts, unten und links auf 0 zu setzen. Dies gibt Ihnen mehr Kontrolle. Angenommen, Sie möchten einen dünnen Rand um die Kanten. Anstatt sich Gedanken über das Mischen von oben und links mit Breite und Höhe zu machen, können Sie einfach einen Pixel- oder Prozentwert für die 4 Eigenschaften angeben, die ich erwähnt habe, um ein einfaches, einheitliches Erscheinungsbild zu erhalten.

Wenn Sie die Option haben, sollten Sie eine standardisierte Bibliothek wie jQuery verwenden. Es hat sich im Laufe der Jahre zu einem unglaublich nützlichen Werkzeug entwickelt, um genau diese Dinge zu tun, ohne dass Sie als Entwickler sich zu viele Sorgen über die zugrunde liegenden Diskrepanzen zwischen den Browserplattformen machen müssen.

1
Geuis 9 Okt. 2012 im 07:13

Entfernen Sie margin:0 auto aus der Wrapper-Klasse

Überprüfen Sie dies http://jsfiddle.net/PAj39/


Mit der folgenden Methode wird das innere Div oben links am Browser ausgerichtet

Füge position:fixed; top:0; left:0 zu .minimize hinzu

Demo http://jsfiddle.net/PAj39/2/

0
Sowmya 9 Okt. 2012 im 06:46

Schauen Sie sich diese Geige an, http://jsfiddle.net/Tv2pP/7/

Ich denke, das war es, wonach Sie gesucht haben, aber es war schwer zu sagen, weil Sie nicht genau angegeben haben, welche Zustände für .minimize und .maximize gehalten werden sollen.

1
Babu 16 Okt. 2012 im 11:54