Question

我有以下代码结构。如果UL的高度超过270像素，那么我想添加CSS属性overflow-y:scroll;或原样。

<ul class="tabs">
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</ul>

Answer 1

以下代码使用jQuery获取高度并进行比较。请注意，它可能需要在您调用此高度的位置可见。

$(function() {
    $(".tabs").each( function() {
        var $this = $(this);
        if ($this.height() > 270) {
            $this.css( 'overflow-y', 'scroll' );
        }
    });
});

请注意，这将适用于包含类标签的所有元素，而不仅仅是第一个元素。

Answer 2

if($(".tabs").height() > 270) {
    $(".tabs").css("overflow-y", "scroll");
}

假设你正在使用jQuery。

Answer 3

你可以这样做：

$(".tabs").attr("style", "overflow-y:scroll");

这将从元素中删除当前样式。您还可以使用引用{。{3}}的.css函数。这将保留其他样式值。

$(".tabs").css("overflow-y","scroll");

你必须检查高度是否超过270px。为此，请使用引用here的.height()方法。你需要弄清楚你想在何时何地进行这项测试。

Answer 4

其他答案提供了检查大小的好方法。只是为了添加一个小插件，我更喜欢将我的标记保存在.css文件中，将其链接到然后在我的JavaScript文件中应用标记：

.scrollList
{
    overflow-y:scroll;
}

然后在剧本中：

$('.tabs').addClass('scrollList');

如果你想再删除它：

$('.tabs').removeClass('scrollList');

并且，如果你希望修改大小，你也可以在.css文件的标记部分中这样做。

如何使用JavaScript应用CSS属性？

4 个答案: