Question

伙计们我想将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>

这里有人会帮忙....

如果有人有任何建议吗？

Answer 1

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

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

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

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

第二件要看的是css。使用position：fixed将元素锁定到位，无论滚动值是什么。在此示例中，有两种方法可将div设置为全屏。第一种是指定宽度和高度为100％。但是，这很脆弱。

最好将top，right，bottom和left设置为0.这样可以让您获得更多控制权。另外，假设您想在边缘周围留一个薄边距。您可以为我提到的4个属性指定一个像素或百分比值，而不是担心将顶部和左侧与宽度和高度混合，以获得简单，统一的外观。

Answer 2

我查看了Berker的fiddle，它将解决您的问题。 Sowmya使用这个小提琴，但我做了一些改动，检查出来：

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

Answer 3

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

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

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

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

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

第二件要看的是css。使用position：fixed将元素锁定到位，无论滚动值是什么。在此示例中，有两种方法可将div设置为全屏。第一种是指定宽度和高度为100％。但是，这很脆弱。

最好将top，right，bottom和left设置为0.这样可以让您获得更多控制权。另外，假设您想在边缘周围留一个薄边距。您可以为我提到的4个属性指定一个像素或百分比值，而不是担心将顶部和左侧与宽度和高度混合，以获得简单，统一的外观。

最后，如果你有选项，你应该使用像jQuery这样的标准化库。多年来，如果没有您，开发人员不必过多地担心底层浏览器平台的差异，它已经成为一种非常有用的工具。

Answer 4

从包装类中删除margin:0 auto

选中此http://jsfiddle.net/PAj39/

Answer 5

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

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

Answer 6

从包装类

中删除margin:0 auto

选中此http://jsfiddle.net/PAj39/

以下方法使内部div与浏览器的左上角对齐

将position:fixed; top:0; left:0添加到.minimize

演示http://jsfiddle.net/PAj39/2/

Answer 7

设置div宽度：100％;位置：固定;它。

但是包装器必须有位置：绝对;属性

Div固定在窗口的顶部

7 个答案: