获取元素的高度然后添加类/更改 css答案

【问题标题】：Get height of element then add class/change css获取元素的高度然后添加类/更改 css
【发布时间】：2015-08-24 20:34:00
【问题描述】：

我正在尝试获取 div 中每个 h2 的高度，然后如果该高度高于 21px，则对该 h2 应用一个类或更改他的 css。

原因是当我的项目标题超过单行时，我的项目标题与标签重叠：

http://www.elisagilis.be

到目前为止，我已经尝试过了：

$('.post-details h2').each(function(){
     if($(this).height() > 21)
     {
         $(this).css({"margin-top": "315px", "line-height": "28px"});
     }
 });

还有这个：

$('.post-details h2').each(function(){
    if($(this).height() > 21)
    {
        $(this).addClass('margintop');
    }
});

它们都不起作用。我也试过不使用每个，但没有用，因为它会选择我所有的 h2 并将 css/class 应用于所有这些。 - 如果您有比我正在考虑的解决方案更好的解决方案，也欢迎他们。

非常感谢您的帮助！

【问题讨论】：

您是否检查了 HTML 或添加了 console.log 以验证 each() 是否正在运行？
你具体查询什么高度？除非您为 h2 元素设置了样式，否则它们都应该具有相同的高度。
@Aweary ：他们没有，因为 2 行 titlew 有更高的高度。当您将窗口大小调整为较小尺寸时，我遇到了问题。长标题变成 2 行标题。这是正常的，它们的扩展宽度较小。例如，平板电脑会看到 2 行标题与标签重叠，这是我不想要的。因此，我正在尝试为该问题找到解决方案。我说清楚了吗？
@jwatts1980 ：我在控制台中没有任何错误。我应该寻找特定的东西吗？
“调整大小”评论是关键.. 正在研究解决方案。

标签： javascript jquery html css height

【解决方案1】：

我想这就是你要找的东西

<h2>some text</h2>
<h2>some text<br>some more</h2>

.border {border:1px solid blue;}

$('h2').each(function(){

    alert($(this).height()); 

    if($(this).height() > 30)
    {
        $(this).addClass('border');
    }
});

只需将其更改为您的偏好。

https://jsfiddle.net/370mg7ak/1/

【讨论】：

嗯，这不是我在上面所做的（代码的第二部分）吗？ :( 啊啊，我不明白。为什么警报？那不是弹出窗口吗？
嗯，也许我错过了理解你，我只是把这些代码放在一起，向你展示 (.each) 函数正在工作，它会提醒你的 h2 标签的高度。显然，一旦你配置了它，你就会删除它。我不明白为什么你的代码不起作用。是您重新调整页面大小时的问题吗？
好吧，我不这么认为，基本上我需要将我的标题完美定位于任何设备，然后是窗口宽度。现在，我的标题在一定宽度上与标签重叠，这看起来不太好，到目前为止我尝试过的修复似乎不起作用：/我不知道为什么，我还是有点Js/Jquery 新手

【解决方案2】：

也许这就是你想要的：FIDDLE

HTML

<div class="cta">
    <span class="cta-title">one line</span>
</div>
<div class="cta">
    <span class="cta-title">one line</span>
</div>
<div class="cta">
    <span class="cta-title">this will take up two lines</span>
</div>

CSS

.cta { width: 100px; float: left; height: 100px; border: 1px solid black; }
.cta-title { width: 100%; color: white; background: black; display: inline-block; }
.two-line { background-color: red; }

jQuery

$(document).ready(function() {
$(function(){
  var $tArray = $('div.cta').children('span');
  $tArray.each(function(){
    if ($(this).height() > 18) {
        $(this).addClass('two-line');
    }
  });
});
    });

【讨论】：

【解决方案3】：

为了使值在窗口调整大小时动态变化，试试这个：

$(window).on("resize", ".post-details h2", function(){
    if($(this).height() > 21)
    {
        $(this).addClass('margintop');
    }
});

这附加到window 的onresize 事件并根据".post-details h2" 选择器过滤事件。但是，在这种情况下，您可能还必须考虑页面大小是否再次变大，那么您还需要初始化案例。

//Initial setup
$(".post-details h2").each(function(){
    if($(this).height() > 21)
        $(this).addClass('margintop');
});

//On window resize
$(window).on("resize", ".post-details h2", function(){
    if($(this).height() > 21)
        $(this).addClass('margintop');
    else
        $(this).removeClass('margintop');
});

【讨论】：

【解决方案4】：

我可能会从<p> 标签中删除position:absolute;，让元素自然流动。这样您就不必担心维护任何额外的 javascript。

要获得底部的 20px 填充，您可以添加以下样式：

.post-details > a, .post-details p { transform: translateY(-20px); }

【讨论】：

只使用 css 的解决方案当然会更好！但是，除非我遗漏了什么，否则该解决方案会在 2 行标题下留给我更大的空间：/
@elisa 我会将您的<h2> 的line-height 更改为较小的值，看看是否有帮助。 .post-details h2 {line-height: 15px; } 应该做的工作
如果需要，您可能还想在<p> 的顶部添加一个小边距或内边距，以便在标题和标签之间留出一些空间

【解决方案5】：

替换以下代码

$('.post-details h2').each(function(){
  if($(this).height() > 21)
  {
    $(this).css({"margin-top": "315px", "line-height": "28px"});
  }
});

与

$(function(){    
  $('.post-details h2').each(function(){
    if($(this).height() > 21)
    {
      $(this).css({"margin-top": "315px", "line-height": "28px"});
    }
  });
});

【讨论】：

【解决方案6】：

我最终将我的元素分组到一个我只使用 css 定位的 div 中。

【讨论】：