関数の不明点について（javascript）

Question

以下のリンク先にあるRight Heightの関数checkIfStacked()の意図がわかりません。

http://coliss.com/articles/build-websites/operation/javascript/js-right-height.html

要素の高さを揃えるにあたってoffsetTopを比較する必要はありますか？

よろしくお願いします。

Answer 1

コードを追っていくと

if ( !isStacked ) {
  forEach(contents, function (content) {
    height = getHeight( content, height );
  });
  forEach(contents, function (content) {
    setHeight( content, height );
  });
} 

という部分で利用されており、紹介記事の

スマホなどで、縦一列に配置された際には、成り行きになります。

という部分の処理ではないかな、と。
縦位置が違うなら、ボックスがスタックしているので高さを揃えない、ということでは。

Comments

[matometaru]

なるほど！！
2列以上で要素の高さが揃ってない場合も成り行きになっちゃうということですね。
今回は// if ( !isStacked ) でいこうと思います。

ありがとうございました。

Answer 2

right-height/right-height.js at master · cferdinandi/right-height #L125-L148

処理内容を見る限り、引数に渡したNodeList(DOMノードを格納した配列のようなもの。配列とは異なる)に格納されている要素の1番目と2番目の縦位置がずれているか検証しているようですね。

• 1番目と2番目の要素が無い場合、false
• 要素の縦方向の位置が一致する場合、false
• 1番目と2番目の要素があり、要素の縦方向の位置が不一致の場合、true

---

失礼。この質問が解答に求めているのは、関数の動作ではなく「意図」、つまりこの関数の意味ですね。
この解答は参考のために残しておきますが、解答としては誤ったものでした。
申し訳ありません。

Comments

[matometaru]

回答ありがとうございます。
position: absolute; bottom: 0; を指定した要素の高さを揃えたいのですが、うまくいかなかず、、意図がよくわからないです。
とりあえず// if ( !isStacked ) で上手くいくのですが、気になります。