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

Question

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

我已经找到了一个 JavaScript 函数来检查这个 question 中的溢出但由于我是 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";});

With this one I want to add 10px to the current margin.

此语法不正确 – .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}');

With this I want to add a div class at the bottom inside the parent.

如果您更正拼写错误( </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>