脱jQuery :hidden :visible

便利なセレクタ :hidden :visible のネイティブの書き換えです。

詳しくは 脱jQuery その1 を御覧ください。

without-jquery

:hidden

:hidden は「大きさを持たない状態の要素」のみを抽出します。

display:none であったり type="hidden" の要素を指しますが、visibility:hidden の要素は当てはまらない事に気をつけましょう。visibility:hidden は「大きさ」は確保しているため当てはまりません。同様に opacity:0 も含まれないので注意です。

jQuery

$(".menu:hidden").text("書き換え")

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 0; i < myMenu.length; i++) {
   if (myMenu[i].offsetWidth === 0 && myMenu[i].offsetHeight === 0) {
        myMenu[i].textContent = "書き換え";
    }
}

.offsetWidth .offserHeight を使います。これは width（または height）+ padding + border-width の値を取得する命令です。一番外枠の大きさというイメージです。if(myMenu[i].offsetWidth === 0 && myMenu[i].offsetHeight === 0) とすることにより「offsetWidth が0、かつ offsetHeight が0の時」となります。高さも幅もなければ :hidden となります。「&&」は「かつ」の意味です。

jQuery のソースコード自体もこんな感じで判定してます。

:visible

:visible は :hidden の逆で、「大きさを持つ要素」を指定します。visibility:hidden、opacity:0 はこちらに属します。

jQuery

$(".menu:visible").text("書き換え")

書き換え JavaScript

var myMenu = document.getElementsByClassName("menu");
for (var i = 0; i < myMenu.length; i++) {
    if (myMenu[i].offsetWidth > 0 || myMenu[i].offsetHeight > 0) {
        myMenu[i].textContent = "書き換え";
    }
}

:hidden の時と考え方は同じです。if(myMenu[i].offsetWidth > 0 || myMenu[i].offsetHeight > 0)で「offsetWidth が0より大きい、または offsetHeight が0より大きい」となります。片方が0より大きければそれで大きさがあるのでこれでOKです。「||」は「または」の意味です。

まとめ

jQuery JavaScript
$("A:hidden").text("B") for (var i = 0; i < A.length; i++) {
  if (A[i].offsetWidth === 0 && A[i].offsetHeight === 0) {
    A[i].textContent = "B";
  }
}
$("A:visible").text("B") for (var i = 0; i < A.length; i++) {
  if (A[i].offsetWidth > 0 || A[i].offsetHeight > 0) {
    A[i].textContent = "B";
  }
}