Fatal编程技术网
  • javascript/
  • Javascript jQuery根据内容高度在加载时切换div类

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

javascript jquery css

Javascript jQuery根据内容高度在加载时切换div类,javascript,jquery,css,toggle,Javascript,Jquery,Css,Toggle,我的模板上加载了动态内容。默认的div背景色为黄色，但当内容长度超过300px时，div将切换或附加将背景色更改为红色的类。下面是代码 <!DOCTYPE html> <head> <title>Untitled Document</title> <style type="text/css" media="all"> .short {background-color:yellow;padding:30px; width:200px;}

我的模板上加载了动态内容。默认的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>


无标题文件
.short{背景色：黄色；填充：30px；宽度：200px；}
.long{背景色：红色；填充：30px；宽度：200px；}
div内容
试试这个

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

});
如果将html更改为如下所示：

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

$(document).ready(function () {
   var $messageDiv = $("#messageDiv");
   if($messageDiv.height() > 300) {
     $messageDiv.toggleClass("long short");
   }
});
但这只是一个粗略的想法，因为不清楚您是如何动态加载内容的，以及我们如何知道何时测试高度。

您的动态内容是如何加载的？有没有什么地方可以让我们在内容动态加载完成后确定？这些内容是从服务器上呈现的，还是使用AJAX从客户端加载的？从服务器上：它们都显示为黄色-无法粘贴整个代码没有足够的空间我看到您有多个div用short这个词。你希望这些div的组合高度大于300吗？没关系，我犯了一个错误，工作非常完美。原始代码很好：$（document）.ready（函数（）{if（$（“.short”）.height（）>300）{$（“.short”）.removeClass（“short”）.addClass（“long”）；}； 
$(document).ready(function () {
   var $messageDiv = $("#messageDiv");
   if($messageDiv.height() > 300) {
     $messageDiv.toggleClass("long short");
   }
});