Geek Answers Handbook

JQuery add class based on element height

I have a table in the application with data, and the thead element in the table has a variable height depending on what the user has registered and uses the application. Therefore, sometimes the aed element is narrow in height, and sometimes much higher. Please note that only two heights are possible.

I would like to use jquery somehow to measure the height of thead element, and then add a class so that it looks like this:

Narrow:

<thead class="narrow">

Tall:

 <thead class="tall">

I'm not even sure that this is possible. Thanks.

+4
source share
2 answers

It looks like you are looking for height function

With this you can write code as follows

 var t = $('thead'); t.addClass(t.height() > someValue ? "tall" : "narrow");
+4
source

I don't know exactly what logic you want, but you can specify a selector to make a jQuery object from thead element, and then use the .height() and .width() methods to get its size:

 var t = $("thead"); if (t.height() > x) { t.addClass("tall"); } else { t.addClass("narrow"); }

Obviously, you can use any logic comparing height and width with each other or with an absolute number.

FYI, tall and narrow are usually not opposites (they can be true at the same time). I think of tall vs. short as opposites along with narrow vs. wide .

+1
source

More articles:


All Articles