の非jQueryと同等：JavaScriptで表示？

Question

だから、jQueryはDOMの '：visible'上でこの素晴らしい疑似を提供します。残念なことに、jQueryとSizzle（またはあなたが使用するエンジン）のコアに結びついています。与えられた要素だけが分かっている場合、普通のJavaScriptに相当するものはありますか？

jQueryの上のリマインダー：目に見えるルール：

• 彼らがなしのCSSの表示値を持っています。
• これらはtype = "hidden"のフォーム要素です。
• は、その幅と高さを明示的に0

祖先要素が隠されているに設定されているので、要素がページに表示されません。

注：指定された要素のスタイルだけをチェックすることは、必ずしも機能するとは限りません。すべての子を隠す代わりに親を隠すことができます。

Answer 1

あなたがsource codeから、関連するコードを取得することができます。

jQuery.expr.filters.hidden = function(elem) { 
    var width = elem.offsetWidth, 
     height = elem.offsetHeight; 

    return (width === 0 && height === 0) || 
      (!jQuery.support.reliableHiddenOffsets && 
      ((elem.style && elem.style.display) || jQuery.css(elem, "display")) === "none"); 
}; 

• jQuery.cssを置き換えることができるgetComputedStyle（またはIE用.currentStyle）。
• jQuery.support.reliableHiddenOffsetsは、プロパティが信頼できるかどうかを判断する変数です（IE8-）。

Answer 2

この作業を行うセレクタライブラリを少なくとも使用することをお勧めします。さもなければ、何らかの理由で今までにテストされ成功したことが証明されているものにあなたの努力を浪費しているだけであり、あなたが最初に試したいくつかの試行を間違えてしまうかもしれません。

たとえば、Sizzleは、小型化/ gzip化されたときにはわずか4kbですので、使用しない理由はほとんどありません。

Answer 3

jqueryはJavaScriptと同じように見えます。ここでは、実際のコードは次のとおりです。

if (jQuery.expr && jQuery.expr.filters) { 

    // here is the real guts of it 
    jQuery.expr.filters.hidden = function(elem) { 

     // plain old JavaScript determining offset 
     var width = elem.offsetWidth, 
     height = elem.offsetHeight; 

     // if any of these are "true" then its "invisible" 
     return (width === 0 && height === 0) || 
     (!jQuery.support.reliableHiddenOffsets && 
     ((elem.style && elem.style.display) || 
     jQuery.css(elem, "display")) === "none"); 
    }; 

    // this is just checking for not hidden 
    jQuery.expr.filters.visible = function(elem) { 
     return !jQuery.expr.filters.hidden(elem); 
    }; 
} 

「reliableHiddenOffsets」コードは、この前のように定義されていて、ここでの本当の教訓は、このようなものはロケット科学ではないです

isSupported = (tds[ 0 ].offsetHeight === 0); 

tds[ 0 ].style.display = ""; 
tds[ 1 ].style.display = "none"; 

// Check if empty table cells still have offsetWidth/Height 
// (IE <= 8 fail this test) 
support.reliableHiddenOffsets = isSupported && (tds[ 0 ].offsetHeight === 0); 

の下にそれを見ることができます。オープンjQueryをクラックして見てください。 jQueryの本当の宝石は、テストされているので、おそらくそれで問題を見つけることはないでしょう。これは、偉大なセレクタエンジンと抽象化のほかに、それほど価値があります。実際に見るのを恐れないでください。あなたは素晴らしい副作用として何かを学びます。