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.

Answer 3

You can do this:

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

This will remove the current style from the element(s). You can also use the .css function referenced here . This will keep other style values.

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

You have to check if the height is over 270px. To do so use the .height() method referenced here . You need to figure out where and when you want to do this test.

Answer 4

Other answers give good methods to check the size. Just to add a tidbit, I prefer to keep my markup in a .css file, link that in and then apply the markup in my JavaScript file:

.scrollList
{
    overflow-y:scroll;
}

And then in the script:

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

And if you want to remove it again:

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

And, if you wish to fix the size you can do that in that markup section in the .css file as well.