Question

我的模板上加载了动态内容。默认div背景颜色为黄色，但是当内容长度超过300px div切换或附加将更改背景颜色为红色的类时。下面是代码。

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<style type="text/css" media="all">
.short {background-color:yellow;padding:30px; width:200px;}
.long {background-color:red;padding:30px;width:200px;}
</style>
</head>

<body>
<div class="short">div content</div>
</body>
</html>

Answer 1

试试这个

$(document).ready(function(){
  $(".short").each(function(){
    if($(this).height() > 300){
      $(this).removeClass("short").addClass("long");
    }
  });

});

Answer 2

$('div.short, div.long').each(function(){
  if($(this).height() > 300) {
    $(this).removeClass('short').addClass('long');
  } else {
    $(this).removeClass('long').addClass('short');
  }
});

Answer 3

如果你改变你的html看起来像这样：

<div id="messageDiv" class="short">div content</div>

然后你可以使用这样的代码：

$(document).ready(function () {
   var $messageDiv = $("#messageDiv");
   if($messageDiv.height() > 300) {
     $messageDiv.toggleClass("long short");
   }
});

但这只是一个粗略的想法，因为它不清楚你是如何动态加载内容以及我们如何知道何时测试高度。

jQuery根据内容高度切换加载div类

3 个答案: