How to apply css property using javascript?

Question

I have the following structure of the code, if the height of UL exceed 270px, 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

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 2

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

Assuming you're using jQuery.

Answer 3

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 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 again:

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

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