CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Swati
Swati

Reputation: 51

How to apply a CSS property using JavaScript?

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>

Upvotes: 3

Views: 612

Answers (4)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

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.

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532445

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.

Upvotes: 6

marcgg
marcgg

Reputation: 66436

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.

Upvotes: 3

Makram Saleh
Makram Saleh

Reputation: 8701

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

Assuming you're using jQuery.

Upvotes: 4

Related Questions