Q

Div要固定在窗口頂部

2012-10-09 123 views 4 likes

4

夥計們我想將div寬度和高度固定爲100％。但問題是div是在一個固定寬度的包裝中。Div要固定在窗口頂部

我在div上面有一個按鈕，onclick =「」使得div改變它的類的全部寬度和高度。我想該div定位到window.My代碼的左上角是

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

將在這裏任何一個可以幫助...

如果有人有任何建議？

2012-10-09 Vivek Dragon

+0

爲什麼你不使用jQuery它會更容易做到這一點..看看這個小提琴：http://jsfiddle.net/gqNsA/5/ –

+2

這很好，它的工作Berker我會用這個，如果它不可能通過簡單的javascript.Thanks這個很好的建議 –

A

回答

4

我認爲這是你以後的事情，但很難說，因爲你沒有具體說明應該爲.minimize和.maximize保留哪些狀態。

請注意，JavaScript與原來的實質上是不同的。

由於'class'是DOM元素上的一個屬性，因此應該使用getAttribute和setAttribute來訪問它。在IE6中有一個非常非常老的bug，它只會讓javascript通過className訪問一個元素的類，但不再是這種情況。

此外，請注意我如何處理類屬性。由於您可以在元素上指定多個類，因此此代碼考慮到了這一點。您可以安全地添加更多的類，而不必擔心最大化和最小化。

第二件要看的是CSS。無論滾動值是什麼，使用position：fixed都會將元素鎖定到位。在這個例子中，有兩種方法將div設置爲全屏。第一種是指定寬度和高度爲100％。但是，這是脆弱的。

它更好地設置頂部，右側，底部和左側爲0.這給你更多的控制權。另外，假設你想在邊緣周圍留下一個薄邊。不必擔心混合頂部和左邊的寬度和高度，您可以爲我提到的4個屬性指定一個像素或百分比值，以獲得簡單而統一的外觀。

2012-10-29 11:43:22 Vinoth

0

從包裝類刪除margin:0 auto

入住這http://jsfiddle.net/PAj39/

下面的方法使內股利左上角對齊到瀏覽器

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

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

2012-10-09 06:37:35 Sowmya

+2

我有一些更多的內容，他們只是想讓該特定的div位於左上角必須隱藏其他內容並在全屏幕上顯示的位置。 –

+0

所以你需要包裝是中心對齊和內部股利左頂部對齊？ – Sowmya

+2

offsourse多數民衆贊成在我的意思。任何建議Sowmya？ –

1

看看這個小提琴，http://jsfiddle.net/Tv2pP/7/

我想這是你所追求的，但它是很難說，因爲你沒有指定什麼狀態應當保持.minimize和.maximize。

請注意，JavaScript與原來的實質上是不同的。

由於'class'是DOM元素上的一個屬性，因此應該使用getAttribute和setAttribute來訪問它。在IE6中有一個非常非常老的bug，它只會讓javascript通過className訪問一個元素的類，但不再是這種情況。

此外，請注意我如何處理類屬性。由於您可以在元素上指定多個類，因此此代碼考慮到了這一點。您可以安全地添加更多的類，而不必擔心最大化和最小化。

第二件要看的是CSS。無論滾動值是什麼，使用position：fixed都會將元素鎖定到位。在這個例子中，有兩種方法將div設置爲全屏。第一種是指定寬度和高度爲100％。但是，這是脆弱的。

它更好地設置頂部，右側，底部和左側爲0.這給你更多的控制權。另外，假設你想在邊緣周圍留下一個薄邊。不必擔心混合頂部和左邊的寬度和高度，您可以爲我提到的4個屬性指定一個像素或百分比值，以獲得簡單而統一的外觀。

最後，如果你有選擇，你應該使用標準化的庫，如jQuery。如果沒有你，開發人員不得不擔心底層的瀏覽器平臺差異太大，多年來它已經成爲一種非常有用的工具。

2012-10-09 07:13:56 Geuis

+1

我試過這個小提琴傢伙。你能指出我在這裏犯了什麼錯誤嗎？' –

+1

腳本我使用與小提琴中相同的一個。 ** HTML **'

\t \t

' –

+0

我不明白你在問什麼。看看我提供的小提琴，並閱讀CSS和JavaScript。它相當不言自明。 – Geuis

1

從包裝類刪除margin:0汽車

入住這http://jsfiddle.net/PAj39/

2012-10-13 08:52:57 SandhanaMurali

1

看看這個小提琴，http://jsfiddle.net/Tv2pP/7/

我想這是你所追求的，但它是很難說，因爲您沒有具體指定應該爲.minimize和.maximize保留哪些狀態。

2012-10-16 11:54:17 Babu

3

我檢查了Berker的fiddle，它會解決你的問題。 Sowmya使用這個小提琴，但我已經做了一些改動，檢查了這一點：

由於class是DOM元素的屬性，它應該使用getAttribute和setAttribute進行訪問。 IE6中有一個非常非常古老的bug，它只會讓javascript通過className訪問元素的類，但事實不是這樣。

2012-10-20 10:26:53

0

只需設置div寬度：100％;與位置：固定;到它。

但包裝必須有位置：絕對;財產

2012-10-27 05:55:10

相關問題