Question

我在页面中有一个垂直和水平居中的div。但是当这个div id大于屏幕时不能居中并且被切断。所以我试图检测div是否大于文档更改为margin 0 auto。但我不知道该怎么做。是否可以删除id属性并为其提供类“onTop”属性？

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

Answer 1

您正在接近这种情况，就好像您只能选择使用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;
  }

JS

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

})

toggleClass()的第二个参数是一个布尔值，表示添加或删除类

Answer 2

试试这个：

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

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

Answer 3

简单：默认情况下提供Id，添加和删除类。确保类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 */ }

你实际上并不需要删除类，因为它不会在第一时间存在。但是如果你在窗口调整大小时调整屏幕会更好。

更改课程的ID

3 个答案: