7

我有以下脚本

(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。

4

3 回答 3

9

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

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

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

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

资料来源：

于 2012-05-03T00:59:32.160 回答
2

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

var menu = $('.main-nav ul');
....
menu.height()+'px';
于 2012-05-03T01:00:30.573 回答
0

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

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

QuirksMode 指定这些属性在应用于window和document对象时受 IE 9+ 和其他浏览器的支持。

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

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

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

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

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

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

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

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

于 2016-09-05T12:04:45.383 回答