如何检查溢出并将其与 if then 函数与 Javascript / JQuery 结合使用

Question

所以我想知道如何检查另一个 div（父）中的 div（子）的文本是否溢出（隐藏）。如果为真，则应在父级内部的底部添加另一个 div，并将样式更改应用于子级。

我已经在question 中找到了一个检查溢出的 JavaScript 函数，但由于我是 JS 的初学者，我需要一些帮助来连接特定任务。也许也搞砸了这个功能。请看一下 =) 我希望有人愿意帮助我。

我试图用 JQuery “形成”任务，但我不知道它们是否像这样工作：

$('.child').css({"margin":"+=10px";});

有了这个，我想在当前边距上增加 10px。

$('.parent').append('<div class="child_2"></div}');

有了这个，我想在父级的底部添加一个 div 类。

HTML：

<div class="parent">
   <div class="child">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
  </div>
</div>

CSS

.parent{
    width:150px;
    height: 100px;
    float:left;
    background-color: red;
}

.child {
    max-height: 80px;
    margin:10px;
    background: green;
    overflow: hidden;
}

Javascript

function checkOverflow(child)
{
   var curOverflow = child.style.overflow;

   if ( !curOverflow || curOverflow === "hidden" )child.style.overflow = "visible";

   var isOverflowing = child.clientWidth < child.scrollWidth || child.clientHeight < child.scrollHeight;

   child.style.overflow = curOverflow;

   return isOverflowing;
}

Answer 1

$('.child').css({"margin":"+=10px";});

有了这个，我想在当前边距上增加 10px。

此语法不正确 - .css() 方法允许您设置属性和值，但您不能像那样动态计算它们。如果你想给元素的当前边距添加 10px，你必须先获取当前边距，然后再添加 10px：

$(document).ready(function(){
  var child = $(".child");
  
  // Get the current margin as an integer
  var margin = parseInt(child.css("margin").split("px")[0]);
    
  // Add 10
  margin = margin + 10;
   
  // Set the margin to the new value
  child.css({"margin": margin});
});

.child {
  outline: 1px solid red;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">Child</div>
</div>

---

$('.parent').append('<div class="child_2"></div}');

有了这个，我想在父级的底部添加一个 div 类。

如果你修正了错字，这应该可以工作（</div} 应该是</div>）：

$(document).ready(function(){
  var parent = $(".parent");
  
  parent.append("<div class='child2'>child2</div>");
});

.parent {
  outline: 1px solid red;  
}
.child2 {
  outline: 1px solid blue;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">parent</div>