5

伙计们，我想将 div 的宽度和高度固定为 100%。但问题是 div 在具有固定宽度的包装器内。

我在 div 上方有一个按钮，onclick="" 使 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 访问元素的类，但现在情况不再如此。

此外，请注意我是如何处理类属性的。由于您可以在一个元素上指定多个类，因此此代码将其考虑在内。您可以安全地添加更多类，而无需担心最大化和最小化。

第二个要看的是css。无论滚动值是什么，使用 position:fixed 都会将元素锁定到位。在这个例子中，有两种方法可以将 div 设置为全屏。第一个是将宽度和高度指定为 100%。然而，这很脆弱。

最好将顶部、右侧、底部和左侧设置为 0。这为您提供了更多控制。此外，假设您想要边缘周围的边缘很薄。无需担心将顶部和左侧与宽度和高度混合，您只需为我提到的 4 个属性指定一个像素或百分比值，以获得简单、统一的外观。

于 2012-10-29T11:43:22.300 回答
3

我检查了伯克的小提琴，它会解决你的问题。Sowmya 使用这个小提琴，但我做了一些改变，看看这个：

由于class是 DOM 元素的属性，因此应该使用getAttribute和访问它setAttribute。IE6 中有一个非常非常古老的错误，它只允许 javascript 通过 访问元素的类className，但现在情况不再如此。

于 2012-10-20T10:26:53.253 回答
1

看看这个小提琴，http://jsfiddle.net/Tv2pP/7/

我认为这就是你所追求的，但很难说，因为你没有具体说明 .minimize 和 .maximize 应该保持哪些状态。

请注意，javascript 与您的原始版本大不相同。

由于 'class' 是 DOM 元素的一个属性，因此应该使用 getAttribute 和 setAttribute 来访问它。IE6 中有一个非常非常古老的错误，它只允许 javascript 通过 className 访问元素的类，但现在情况不再如此。

此外，请注意我是如何处理类属性的。由于您可以在一个元素上指定多个类，因此此代码将其考虑在内。您可以安全地添加更多类，而无需担心最大化和最小化。

第二个要看的是css。无论滚动值是什么，使用 position:fixed 都会将元素锁定到位。在这个例子中，有两种方法可以将 div 设置为全屏。第一个是将宽度和高度指定为 100%。然而，这很脆弱。

最好将顶部、右侧、底部和左侧设置为 0。这为您提供了更多控制。此外，假设您想要边缘周围的边缘很薄。无需担心将顶部和左侧与宽度和高度混合，您只需为我提到的 4 个属性指定一个像素或百分比值，以获得简单、统一的外观。

最后，如果您可以选择使用像 jQuery 这样的标准化库。多年来，它已成为一种非常有用的工具，可以在您（开发人员）无需过多担心底层浏览器平台差异的情况下完成此类事情。

于 2012-10-09T07:13:56.030 回答
1

margin:0从包装类中删除auto

检查这个http://jsfiddle.net/PAj39/

于 2012-10-13T08:52:57.897 回答
1

看看这个小提琴，http://jsfiddle.net/Tv2pP/7/

我认为这就是你所追求的，但很难说，因为你没有具体说明 .minimize 和 .maximize 应该保持哪些状态。

于 2012-10-16T11:54:17.797 回答
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 回答
0

只需设置 div 宽度：100%；位置：固定；给它。

但是包装器必须有 position:absolute; 财产

于 2012-10-27T05:55:10.017 回答