Question

我有以下脚本

(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);

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

Answer 1

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

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

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

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

来源：

Answer 2

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

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

Answer 3

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

尽管如此，根据不同的来源进行调查，结果显示这些JavaScript原生属性在今天使用的大多数浏览器上得到了很好的支持。
在我可以阅读的MDN clientHeight article上，Chrome，Firefox（Gecko），Internet Explorer，Opera，Safari（WebKit）支持它，但未指定版本控制。

QuirksMode在应用于window和document个对象时指定these properties are supported from IE 9+ and other browsers。

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

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

在this article treating the clientHeight property上，重点关注IE上的物理像素和逻辑像素之间的差异＆lt; 8和IE＆gt; = 8：

在早于版本8的Internet Explorer中，它会检索高度在物理像素大小，而从版本8，它返回高度逻辑像素大小。

假设在浏览器上使用缩放主要用于移动设备，我认为：

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

为了更轻松地进行维度管理， em 单元可以改善跨平台开发（W3 org specs on units and rem's draft），这似乎是supported on modern browsers。我仍然没有CSS媒体查询中相对度量单位的经验，但阅读这篇interesting article on the best unit measure for CSS media-queries或许值得研究。

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

普通的javascript到jquery - clientHeight

3 个答案: