5

みんな、divの幅と高さを100％に固定したい。しかし、問題は div が固定幅のラッパー内にあることです。

onclick="" divの上にボタンがあり、divのクラスを全幅と高さで変更します。そのdivをウィンドウの左上隅に配置したい.私のコードは

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

しかし、私はラッパーでこのように見せたい

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

誰かがここで助けてくれますか....

誰か提案があれば??

4

7 に答える 7

4

これはあなたが求めていたものだと思いますが、.minimize と .maximize に対してどの状態を保持する必要があるかを正確に指定していなかったため、わかりにくかったです。

JavaScript が元のものと大幅に異なることに注意してください。

「class」は DOM 要素の属性であるため、getAttribute および setAttribute を使用してアクセスする必要があります。IE6 には非常に古いバグがあり、javascript が className 経由でのみ要素のクラスにアクセスできるようになりましたが、現在はそうではありません。

さらに、class 属性の扱い方にも注意してください。要素には複数のクラスを指定できるため、このコードではそれを考慮しています。最大化と最小化をいじることなく、クラスを安全に追加できます。

2 番目に注目すべきは css です。position:fixed を使用すると、スクロール値に関係なく要素が所定の位置に固定されます。この例では、div をフルスクリーンに設定する方法が 2 つあります。1 つ目は、幅と高さを 100% に指定することです。ただし、これは脆いです。

上、右、下、左を 0 に設定することをお勧めします。これにより、より細かく制御できます。また、エッジの周りに薄いマージンが必要だとします。上と左と幅と高さを混在させることを心配する代わりに、前述の 4 つのプロパティにピクセル値またはパーセンテージ値を指定するだけで、簡単で均一な外観を得ることができます。

于 2012-10-29T11:43:22.300 に答える
3

Berker's fiddleを確認しましたが、問題は解決します。Sowmya はこのフィドルを使用していますが、私はいくつかの変更を加えました。これを確認してください。

は DOM 要素の属性であるため、およびclassを使用してアクセスする必要があります。IE6 には非常に古いバグがあり、JavaScript は を介し​​てのみ要素のクラスにアクセスできましたが、現在はそうではありません。getAttributesetAttributeclassName

于 2012-10-20T10:26:53.253 に答える
1

このフィドルを見てください、http://jsfiddle.net/Tv2pP/7/

これはあなたが求めていたものだと思いますが、.minimize と .maximize に対してどの状態を保持する必要があるかを正確に指定していなかったため、わかりにくかったです。

于 2012-10-16T11:54:17.797 に答える
1

margin:0ラッパー クラスから auto を削除します

これをチェックしてくださいhttp://jsfiddle.net/PAj39/

于 2012-10-13T08:52:57.897 に答える
1

このフィドルを見てください、http://jsfiddle.net/Tv2pP/7/

これはあなたが求めていたものだと思いますが、.minimize と .maximize に対してどの状態を保持する必要があるかを正確に指定していなかったため、わかりにくかったです。

JavaScript が元のものと大幅に異なることに注意してください。

「class」は DOM 要素の属性であるため、getAttribute および setAttribute を使用してアクセスする必要があります。IE6 には非常に古いバグがあり、javascript が className を介してのみ要素のクラスにアクセスできるようになりましたが、それはもはや当てはまりません。

さらに、class 属性の扱い方にも注目してください。要素には複数のクラスを指定できるため、このコードではそれを考慮しています。最大化と最小化をいじることなく、クラスを安全に追加できます。

2 番目に注目すべきは css です。position:fixed を使用すると、スクロール値に関係なく要素が所定の位置に固定されます。この例では、div をフルスクリーンに設定する方法が 2 つあります。1 つ目は、幅と高さを 100% に指定することです。ただし、これは脆いです。

上、右、下、左を 0 に設定することをお勧めします。これにより、より細かく制御できます。また、エッジの周りに薄いマージンが必要だとします。上と左と幅と高さを混在させることを心配する代わりに、前述の 4 つのプロパティにピクセル値またはパーセント値を指定するだけで、簡単で均一な外観を得ることができます。

最後に、オプションがある場合は、jQuery などの標準化されたライブラリを使用する必要があります。これは、開発者が基盤となるブラウザー プラットフォームの不一致についてあまり心配することなく、まさにこの種のことを行うための非常に便利なツールになりました。

于 2012-10-09T07:13:56.030 に答える
0

div width:100%; を設定するだけです。位置付き:固定; それに。

ただし、ラッパーには position:absolute; が必要です。財産

于 2012-10-27T05:55:10.017 に答える
0

margin:0 autoラッパー クラスから削除

これをチェックしてくださいhttp://jsfiddle.net/PAj39/

以下のメソッドは、内側の div をブラウザの左上に揃えます。

position:fixed; top:0; left:0に追加.minimize

デモhttp://jsfiddle.net/PAj39/2/

于 2012-10-09T06:37:35.427 に答える