如何使用 JavaScript 应用 CSS 属性？答案

【问题标题】：How to apply a CSS property using JavaScript?如何使用 JavaScript 应用 CSS 属性？
【发布时间】：2015-02-13 01:08:16
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

以下代码使用 jQuery 获取高度并进行比较。请注意，它可能需要在您调用它的地方可见才能具有有效高度。

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

请注意，这将适用于具有类选项卡的所有元素，而不仅仅是第一个。

【讨论】：

赞成只调用一次选择器，而不是其他忘记基本 jQuery 原则的人。
这可以通过存储 var $this = $(this) 来优化，这样每次迭代都会减少一次选择器查找。 +1
@caballou -- 通常，我也会这样做。我已经更新了。

【解决方案2】：

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

假设您使用的是 jQuery。

【讨论】：

还假设页面上只有一个数学元素，或者如果第一个元素超过高度要求，则应该将 CSS 应用于所有匹配元素……尽管这可能是一个安全的假设。

【解决方案3】：

你可以这样做：

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

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

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

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

【讨论】：

假设他甚至使用 jQuery，你应该使用 .css() 函数。
确实如此。我将其添加到我的答案中。他正在使用 jquery（见标签）
很简单:)。如何检查height of UL exceed 270px
@marcgg：+1 He's using jquery(see tags) 更正She。 ;)
@rakesh：我的错^^我还添加了一些参考来检查高度

【解决方案4】：

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

.scrollList
{
    overflow-y:scroll;
}

然后在脚本中：

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

如果你想再次删除它：

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

并且，如果您希望修复大小，您也可以在 .css 文件的标记部分中执行此操作。

【讨论】：