How to apply a CSS property using JavaScript?

Question

I have the following structure of the code. If the height of UL exceeds 270 pixels, then I want to add the CSS property overflow-y:scroll; or else 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 the height and compare it. Note that it probably needs to be visible at the point where you call this 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 on all elements with the class tabs, not just the first one.

Answer 2

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

Assuming you're using jQuery.