通过 jQuery 控制 CSS 边框答案

【问题标题】：Control CSS border via jQuery通过 jQuery 控制 CSS 边框
【发布时间】：2017-11-03 14:39:37
【问题描述】：

我正在尝试为一个 div 添加一个边框，但在它的最后还有其他 div。我想结束边界，直到一个特定的 div。示例代码如下。将无法编辑实际的模板，所以我正在寻找一个 jQuery/CSS 解决方案来解决这个问题。使用特定的 CSS 类添加边框是一种选择，但不是一个完美的解决方案，因为部分之间会有间隙并且边框会丢失。

$(".article-content")
  .css("border", "2px red solid")
  .find("#beforeFooter")
  .end();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="article-content">
  <div class="article-title">Title</div>
  <div class="article-share">Share tools</div>
  <p><span>Hello</span>, how are you?</p>
  <p><span>Hello</span>, your name?</p>
  <p><span>Hello</span>, your age?</p>
  <p>Ends here</p>
  <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div>
  <div class="article-footer">Some other footer content</div>
</div>

【问题讨论】：

这意味着会有多个边框，或者一次只有一个边框，您希望能够控制边框延伸到哪里？
它是一个包含一些内容的边框，但在我的场景中，内容有一些接近结尾的部分，这些部分不能有边框。所以我在想是否还有办法使用 jquery 来处理这个问题（可能是不可能的，但如果有的话，试着征求意见）。因此，一旦页面上有特定的 div，边框就会停止。只有左右边框就可以了
@Jay - 是否有任何解决方案解决了您的问题？

标签： jquery html css

【解决方案1】：

一种选择是获取#beforeFooter 元素的偏移量（它从.article-content 元素顶部偏移的像素数），然后将.article-content 的高度设置为该偏移量。

var beforeFooterPosition = $("#beforeFooter").position();
$(".article-content").height(beforeFooterPosition.top);

这是一个工作示例。我必须减去额外的 18 个像素才能使边框位于正确的位置。您需要尝试使用该数字以获得所需的效果。

var beforeFooter = $("#beforeFooter").position();
$(".article-content").height(beforeFooter.top - 18);

.article-content {
  border: 2px solid red;
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="article-content">
  <div class="article-title">Title</div>
  <div class="article-share">Share tools</div>
  <p><span>Hello</span>, how are you?</p>
  <p><span>Hello</span>, your name?</p>
  <p><span>Hello</span>, your age?</p>
  <p>Ends here</p>
  <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div>
  <div class="article-footer">Some other footer content</div>
</div>

【讨论】：