Simple javascript for jquery - clientHeight

Question

I have the following script

(function(win){ var doc = win.document; if (doc.querySelector && doc.addEventListener) { var toggler = doc.querySelector('.toggle-menu') var menu = doc.querySelector('.main-nav ul'); menu.style.height = '0px'; toggler.addEventListener('click',function(e) { e.preventDefault(); if (menu.style.height == '0px') { menu.style.height = 'auto'; if (menu.clientHeight != 0) { menu.style.height = menu.clientHeight+'px'; } } else { menu.style.height = '0px'; } }); } })(this); 

What will be the jQuery version of this script, since I cannot find the jQuery equivalent for clientHeight.

Answer 1

clientHeight not a jQuery property. It was introduced in Internet Explorer, but is not part of the W3C specifications. It seems to be supported only in Firefox and Internet Explorer. I just tested that it works in the latest version of Chrome. Not sure if the results are standard for browsers, although the link published below does not offer.

In addition, Mozilla suggests using the following formula for browsers that do not support it:

clientHeight can be calculated as CSS height + adding CSS - the height of the horizontal scroll bar (if any).

I assume that this is the scroll bar of the element itself, and not the entire browser window if the element does not occupy the entire window.

Sources:

• clientHeight / clientWidth returning different values ​​in different browsers
• https://developer.mozilla.org/en/DOM/element.clientHeight

Answer 2

There is . height () . It will return the height of the element.

 var menu = $('.main-nav ul'); .... menu.height()+'px'; 

Answer 3

As far as today is September 2016 , I see that jQuery (version 3.1.0) still does not include its own method to get element.clientWidth and element.clientHeight normalized way in different browsers.

However, exploring various sources, it turns out that these JavaScript properties are supported in most browsers used today.
On the MDN clientHeight page, I can read that it is supported in Chrome, Firefox (Gecko), Internet Explorer, Opera, Safari (WebKit), but there is no version name.

QuirksMode indicates these properties are supported from IE 9+ and other browsers when applied to window and document objects.

Another QuirksMode article on two properties that apply to page elements does not specify browser support specifications, but a very useful page tester is available to check the consistency of element sizes in browsers that you have:

http://www.quirksmode.org/dom/tests/elementdimensions.html

In this article on the clientHeight property , it’s important to focus on the differences between physical pixels and logical pixels in IE <8 and IE> = 8:

In Internet Explorer, earlier than version 8, it extracts height in the size of a physical pixel, whereas from version 8 it returns height in the size of a logical pixel.

Assuming that using zoom in browsers is mainly used on mobile devices, I think that:

• it is safe enough to use element.clientWidth and element.clientHeight for desktop audiences / web applications;
• for pages with multiple devices / web applications, using units of a relative unit of measure (e.g. em) can solve the gap between physical and logical pixels.

For easier size management, the em block can improve cross-platform development ( W3 org specifications on units and draft a>), which seems to be supported in modern browsers . I still have no experience regarding units of relative measure in CSS CSS queries, but after reading this interesting article about the best unit measure for CSS media queries , it might be worth exploring.

Any opinion on these considerations is appreciated.