根据元素高度添加/删除类

时间:2016-09-14 14:53:11

标签: jquery html css

我有一个元素需要根据子p标签的高度来改变高度:

<div id="eventpg" class="bg-pink linkbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</p>
</div>

如果段落超过某个高度,我通过添加一个类来实现所需的更改:

var divheight = $("#eventpg p").height();
if ( divheight > 173) {
    $("#eventpg").addClass("height535");
}

这个类增加了这个类:

. height535{height:535px;}

这在大多数情况下都可以正常工作,但如果用户将其设备从纵向旋转到横向,则仍会保留添加的类,并且必须重新加载页面才能将其删除。

我如何实现“飞行中”的高度变化?因此,如果浏览器窗口更改导致段落更改高度,容器会更改以反映此情况吗?

由于

3 个答案:

答案 0 :(得分:1)

您应该可以在resize$(window).on('load resize', function() { var divheight = $("#eventpg p").height(); if ( divheight > 173) { $("#eventpg").addClass("height535"); } })' 上运行该功能:

{{1}}

答案 1 :(得分:0)

您可以监听调整大小事件,根据需要添加或删除该类:

*finger

或做类似的事情,例如jQuery Mobile的var heightThreshold = 173; // controlling the height globally may be easier $(window).resize(function () { var el = $("#eventpg"), divheight = el.find("p").height(); if ( divheight > heightThreshold ) { el.addClass("height535"); } else { el.removeClass("height535"); } }); 事件 - 请参阅here

答案 2 :(得分:0)

感谢您的帮助。使用The One and Only ChemistryBlob和Derek Story的答案的组合,以下成功地工作:

$(window).on('load resize', function() {
    var divheight = $("#eventpg p").height();
    if ( divheight > 173) {
        $("#eventpg").addClass("height535");
    } else {
        $("#eventpg").removeClass("height535");
    }
});