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

clientHeightに相当するjQueryが見つからないため、そのスクリプトのjQueryバージョンはどうなりますか。

4

3 に答える 3

9

clientHeightjQueryプロパティではありません。これはInternetExplorerで導入されましたが、W3C仕様の一部ではありません。FirefoxとInternetExplorerでのみサポートされているようです。ただし、最新バージョンの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（ver 3.1.0）には、さまざまなブラウザー間で正規化された方法でelement.clientWidthおよびを取得するための独自のメソッドがまだ含まれていないことがわかります。element.clientHeight

それでも、さまざまなソースを調査したところ、これらのJavaScriptネイティブプロパティは、現在使用されているほとんどのブラウザで十分にサポートされていることがわかりました。MDN clientHeight
の記事では、Chrome、Firefox（Gecko）、Internet Explorer、Opera、Safari（WebKit）でサポートされていますが、バージョン管理は指定されていません。

QuirksModeは、これらのプロパティがおよびオブジェクトに適用されたときにIE9以降およびその他のブラウザーでサポートされることを指定します。windowdocument

ページ要素に適用される2つのプロパティに関する別のQuirksModeの記事では、ブラウザのサポートに関する仕様は示されていませんが、非常に便利なページ上のテスターを使用して、使用しているブラウザで要素の寸法の一貫性を自分でテストできます。

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

clientHeightプロパティを扱うこの記事では、IE<8およびIE>=8の物理ピクセルと論理ピクセルの違いに重要な焦点が当てられています。

バージョン8より前のInternetExplorerでは、物理ピクセルサイズで高さを取得しますが、バージョン8では、論理ピクセルサイズで高さを返します。

ブラウザでのズームの使用が主にモバイルデバイスで使用されていると仮定すると、次のように思います。

  • デスクトップオーディエンスページ/Webアプリを使用element.clientWidthして使用するのに十分安全です。element.clientHeight
  • クロスデバイスページ/ウェブアプリの場合、相対的な測定単位（emなど）を使用すると、物理ピクセルと論理ピクセルの間のギャップを解決できます。

ディメンション管理を容易にするために、emユニットはクロスプラットフォーム開発（ユニットのW3組織仕様とremのドラフト）を改善できます。これは、最新のブラウザーでサポートされているようです。CSSメディアクエリの相対的な測定単位についてはまだ経験がありませんが、CSSメディアクエリの最適な単位測定に関するこの興味深い記事を読むと、おそらく調査に値します。

これらの考慮事項に関するご意見をいただければ幸いです。

于 2016-09-05T12:04:45.383 に答える