How to apply CSS property using JavaScript?

Question

I have the following code structure. If the height of the UL exceeds 270 pixels, I want to add a CSS property overflow-y:scroll;or otherwise, as it is.

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

Answer 1

The following code uses jQuery to get height and comparison. Please note that it should probably be visible where you call it in order to have a valid height.

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

Note. This will work with all elements with class tabs, not just the first one.

Answer 2

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

Assuming you are using jQuery.

Answer 3

:

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

(). .css, . .

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

, 270 . .height(), . , .

Answer 4

. , .css, , JavaScript:

.scrollList
{
    overflow-y:scroll;
}

script:

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

:

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

, .css.