更改一個類的ID

我有一個div在頁面中垂直和水平居中。但是當這個div id大於屏幕不能被居中並被剪切時。所以我試圖檢測div是否大於文檔更改爲margin 0 auto。但我不知道該怎麼做。是否有可能刪除ID屬性，並給它類「onTop」屬性？更改一個類的ID

我在這裏玩：http://jsfiddle.net/c9unU/

的jQuery：

$(function(){  
    var documentHeight = $(document).height(); 
    var contenttHeight = $("#content").height(); 

    if(documentHeight < contenttHeight){ 
     /* give it the class onTop */ 
    }else{ 
     /* give it the id content */ 
    } 
})

HTML：

<div id="background"> 
    <div id="content"> some text inside</div> 
</div>

CSS：

body {margin: 0;padding: 0;color:#fff; font-size:40px;} 

#background { 
    position: absolute; 
    width:100%; 
    height:100%; 
    border: 0px; 
    background-color:blue; 
} 

.onTop { 
    position: relative; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    background-color:green; 
    width:300px; 
    height:600px; 
    border:0px; 
    } 

#content { 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-300px; 
    margin-left:-150px; 
    background-color: red; 
    width:300px; 
    height:600px; 
    border:0px; 
}

來源

2013-01-01 Nrc

爲什麼不簡單使用'max-width：300px'？ –

你嘗試使用'margin：0 auto'而不是這個黑客？ –

如果頁面大於id，則id必須水平和垂直居中。保證金0自動如果ID小於頁面 – Nrc

您已接近一發而如果你只有使用ID CSS OR類CSS規則的選擇。這很簡單，這兩個結合：

#content { 
    /* properties here*/ 
} 

/* CSS for #content when class onTop is added to it*/ 
#content.onTop { 
    position: relative; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    background-color:green; 
    width:300px; 
    height:600px; 
    border:0px; 
    }

$(function(){  
    var documentHeight = $(document).height(); 
    var contenttHeight = $("#content").height(); 
    $('#content').toggleClass('onTop', documentHeight < contenttHeight) 

})

的toggleClass()第二個參數是一個布爾值，表明添加或刪除類

來源

2013-01-01 16:23:25 charlietfl

這是一個非常好的解決方案，謝謝。但是，當用戶調整窗口大小時，我的問題就出現了。 – Nrc

使用調整大小處理程序http://api.jquery.com/resize/ – charlietfl

試試這個：

$(function(){  
    var documentHeight = $(document).height(); 
    var contenttHeight = $("#content").height(); 

    if(documentHeight < contenttHeight){ 
     $('#content').removeAttr('id').addClass('onTop'); 
    }else{ 
     $('.onTop').removeClass().attr('id', 'content'); 
    } 
})

來源

2013-01-01 16:18:14 Eli

就是這樣！那是我一直在尋找的。 – Nrc

如果文檔高度再次改變而沒有重新加載頁面，是否可以再次更改？（我的問題是用平板電腦更改爲橫向到縱向） – Nrc

簡單：在默認情況下提供身份證，並添加和刪除類。確保類css是後默認的CSS。保持簡單。

CSS：

#content.onTop { 
    position: relative; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    background-color:green; 
    width:300px; 
    height:600px; 
    border:0px; 
    }

JQuery的：

if(documentHeight < contenttHeight){ 
     /* give it the class onTop */$('#content').addClass('onTop'); 
    }else{ 
     /* remove class ontop */ 
    }

你實際上並不需要刪除類，因爲它不會出現在首位。但是，如果您調整窗口大小調整屏幕，則會更好。

來源

2013-01-01 16:24:27 geekman

這是非常好的！但我不知道內容的高度，我不知道第一次文檔是否會比內容大。例如在小片中。每次窗口改變時我都需要改變它。可能嗎？ – Nrc

是的，有JavaScript處理程序的window.onresize..and文件和窗口大小..谷歌它。 – geekman

更改一個類的ID

回答

相關問題