普通 javascript 到 jquery - clientHeight

plain javascript to jquery - clientHeight

提问by alexandra

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 that script, since i can't find a jQuery equivalent to clientHeight.

该脚本的 jQuery 版本是什么，因为我找不到与 clientHeight 等效的 jQuery。

回答by Chris Laplante

clientHeightis not a jQuery property. It was introduced in Internet Explorer, but isn't part of the W3C specifications. It looks like it is only supported in Firefox and Internet Explorer. I've just tested that it works in the latest version of Chrome, though. Not sure if results are standard across browsers, though the link I posted below suggests no.

clientHeight不是 jQuery 属性。它是在 Internet Explorer 中引入的，但不是 W3C 规范的一部分。看起来它只在 Firefox 和 Internet Explorer 中受支持。不过，我刚刚测试过它可以在最新版本的 Chrome 中运行。不确定结果是否跨浏览器是标准的，尽管我在下面发布的链接表明不是。

Also, Mozilla suggests the following formula to be used in place for browsers that don't support it:

此外，Mozilla 建议将以下公式用于不支持它的浏览器：

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

clientHeight 可以计算为 CSS 高度 + CSS 填充 - 水平滚动条的高度（如果存在）。

I'm assuming that is the scrollbar of the element itself, not the entire browser window, unless the element takes up the entire window.

我假设这是元素本身的滚动条，而不是整个浏览器窗口，除非元素占据整个窗口。

Sources:

资料来源：

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

• clientHeight/clientWidth 在不同的浏览器上返回不同的值
• https://developer.mozilla.org/en/DOM/element.clientHeight

回答by Bakudan

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

有.height()。它将返回元素的高度。

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

回答by Emanuele Del Grande

As far as today - September 2016, I can see that jQuery (ver 3.1.0) still does not include its own method to get the element.clientWidthand element.clientHeightin a normalized way accross different browsers.

就今天 - 2016年9 月而言，我可以看到 jQuery（3.1.0 版）仍然没有包含自己的方法来以规范化的方式在不同的浏览器中获取element.clientWidth和element.clientHeight。

Nevertheless, investigating on different sources, it turns out these JavaScript native properties are well supportedon the majority of browsers used today.
On the MDN clientHeight articleI can read it is supported on Chrome, Firefox (Gecko), Internet Explorer, Opera, Safari (WebKit), but no versioning is specified.

尽管如此，对不同来源的调查发现，当今使用的大多数浏览器都很好地支持这些 JavaScript 原生属性。
在MDN clientHeight 文章中，我可以阅读 Chrome、Firefox (Gecko)、Internet Explorer、Opera、Safari (WebKit) 支持它，但没有指定版本控制。

QuirksMode specifies these properties are supported from IE 9+ and other browserswhen applied to the windowand documentobjects.

QuirksMode 指定当应用于和对象时，IE 9+ 和其他浏览器支持这些属性。windowdocument

In another QuirksMode article on the two properties applied to page elements, no specifications about browser support is given, but a very useful on-page tester is available to test by yourself element dimensions consistency on the browsers you have:

在另一篇关于应用于页面元素的两个属性的 QuirksMode 文章中，没有给出有关浏览器支持的规范，但是可以使用一个非常有用的页面测试器来测试您拥有的浏览器上元素尺寸的一致性：

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

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

On this article treating the clientHeight propertythere is an important focus on differences between physical pixels and logical pixels on IE < 8 and IE >= 8:

在处理 clientHeight 属性的这篇文章中，重点关注了 IE < 8 和 IE >= 8 上物理像素和逻辑像素之间的差异：

In Internet Explorer earlier than version 8, it retrieves the height in physical pixel size, while from version 8, it returns the height in logical pixel size.

在版本 8 之前的 Internet Explorer 中，它以物理像素大小检索高度，而从版本 8 开始，它以逻辑像素大小返回高度。

Assuming that the use of the zoom on browsers is mainly used on mobile devices, I think it that:

假设在浏览器上使用zoom主要是在移动设备上使用，我认为：

• it is safe enough using element.clientWidthand element.clientHeightfor desktop audience pages/web apps;
• for cross-device pages/web apps the usage of relative measure units (e.g. em's) could solve the gap between physical and logical pixels.

• 使用element.clientWidth和element.clientHeight用于桌面受众页面/网络应用程序足够安全；
• 对于跨设备页面/网络应用程序，使用相对度量单位（例如 em）可以解决物理像素和逻辑像素之间的差距。

For an easier dimensions management, emunit could improve cross-platform development (W3 org specs on units and rem's draft), which seems to be supported on modern browsers. I still have no experience on relative measure units in CSS media-queries, but reading this interesting article on the best unit measure for CSS media-queriesperhaps it deserves a study.

为了更容易的维度管理，emunit 可以改进跨平台开发（W3 org 规范单位和 rem 的草案），这似乎在现代浏览器上得到支持。我仍然没有关于 CSS 媒体查询中的相对度量单位的经验，但是阅读这篇关于 CSS 媒体查询的最佳单位度量的有趣文章也许值得研究。

Any opinion on these considerations is appreciated.

对这些考虑的任何意见表示赞赏。