Javascript 基于循环横幅内的行数将样式应用于跨度 上下文

下面是我一直在使用的JSFIDLE：

对于上下文，我使用在

.custom banner

包装中的每个

中循环使用旋转横幅。我将脚本作为JSFIDLE中的外部资源

起点 这样做的目的是使每个有多行的

span

应用样式A，而只有一行的

span

应用样式B。调整窗口大小会改变每个

span

的样式

我对

span

而不是

a

执行此操作，基于这样一个假设，即为了实现我想要的，我需要以默认情况下显示为块的元素为目标

问题和目标 我遇到的问题是在循环脚本中，不可见的

span

的高度为0，因此数学不正确，即使

span

变为可见，它也不会应用正确的样式

目标是找到一种方法，让它在

span

可见时检查，并应用正确的样式

奖金目标 如果有更好的方法来计算线宽并确定需要应用的样式，我也希望得到这些建议

我以前使用过这个，但是当我手动调整窗口大小时，它有很多问题

var divheight = $(this).height(); 
var lineheight = $(this).css('line-height').replace("px","");
if (Math.round(divheight/parseInt(lineheight)) >= 2) {
$(this).attr('style','font-size: 10px');
} else {
$(this).attr('style','font-size: inherit');
};

---

试试这个javascript。我已经从您链接的JSFIDLE编辑了您的javascript。如果您不想更改字体颜色（如在JSFIDLE中），而只想更改字体大小，那么请适当地进行更改。将下面的代码复制粘贴到您的计算机并进行验证

$(document).ready(function () {

    $(window).on("resize", function () {
        $('.custom-banners span').each(function () {
            var lineheight = 20;
            var divheight = $('.banner-link').height(); 
            if (divheight > lineheight) {
                $(this).css('color', 'red');
            } else {
                $(this).css('color', 'green');
            };
        });
    });
});

---

您还可以尝试测量文本的宽度，并将其与容器的宽度进行比较。请看这篇文章：窗户宽度是唯一可以参考的宽度，这仍然适用吗？我的包装纸的宽度等于窗户的大小。我看没有理由不这样。只需在窗口调整大小事件中重新触发任何JS。