普通的javascript到jquery – clientHeight
我有以下脚本
(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。
clientHeight不是jQuery属性。 它是在Internet Explorer中引入的，但不是W3C规范的一部分。 它看起来只在Firefox和Internet Explorer中受支持。 我刚刚测试过它可以在最新版本的Chrome中运行。 不确定结果是否是浏览器的标准结果，尽管我在下面发布的链接表明没有。
此外，Mozilla建议对不支持它的浏览器使用以下公式：
clientHeight可以计算为CSS高度+ CSS填充 – 水平滚动条的高度（如果存在）。
我假设这是元素本身的滚动条，而不是整个浏览器窗口，除非元素占用整个窗口。
资料来源：
- clientHeight / clientWidth在不同的浏览器上返回不同的值
- https://developer.mozilla.org/en/DOM/element.clientHeight
有.height（） 。 它将返回元素的高度。
var menu = $('.main-nav ul'); .... menu.height()+'px';
到今天 – 2016年9月 ，我可以看到jQuery（ver 3.1.0）仍然没有包含自己的方法来以不同浏览器的规范化方式获取element.clientWidth和element.clientHeight 。
然而，调查不同的来源，结果certificate这些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单元可以改进跨平台开发（ W3 org specs on units和rem’s draft ），这似乎在现代浏览器上得到支持 。 我仍然没有CSS媒体查询中相关度量单位的经验，但阅读这篇关于CSS媒体查询的最佳单位度量的有趣文章或许值得研究。
对这些考虑的任何意见表示赞赏。