普通的javascript到jquery - clientHeight

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填充 - 水平滾動條的高度（如果存在）。

我假設這是元素本身的滾動條，而不是整個瀏覽器窗口，除非元素占用整個窗口。

資料來源：

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

Answer 2

有.height（） 。 它將返回元素的高度。

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

Answer 3

到今天 - 2016年9月 ，我可以看到jQuery（ver 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單元可以改進跨平台開發（ W3組織規范和rem的草案 ），這似乎在現代瀏覽器上得到支持 。 我仍然沒有CSS媒體查詢中相對度量單位的經驗，但是閱讀這篇關於CSS媒體查詢的最佳單位度量的有趣文章或許它值得研究。

對這些考慮的任何意見表示贊賞。