Как применить свойство CSS с помощью JavaScript?

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");

Это удалит текущий стиль из элемента (ов). Вы также можете использовать функцию .css, указанную здесь здесь . Это сохранит другие значения стиля.

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

Вы должны проверить, превышает ли высота 270px. Для этого используйте метод .height(), на который ссылается здесь . Вам нужно выяснить, где и когда вы хотите провести этот тест.

Answer 4

Другие ответы дают хорошие методы для проверки размера. Просто чтобы добавить тидбит, я предпочитаю хранить свою разметку в файле .css, связывать ее и затем применять разметку в моем файле JavaScript:

.scrollList
{
    overflow-y:scroll;
}

А потом в сценарии:

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

И если вы хотите удалить его снова:

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

И, , если , вы хотите установить размер, который вы можете сделать в этом разделе разметки в файле .css.