2016-02-23

CSSの定義からHTMLの要素を取得するために

text-overflow: ellipsisのためにtitle属性を仕込むのもバカバカしい。またそういった定義がある要素のクラス名を決め打ちで動的に仕込んでいくのもまたバカバカしい。ということでCSS定義を使ってHTML要素群を取得するような関数を書くことにした。@ykztsにも書いてもらったのでそちらもどうぞ。

// var elms = getElementsByDeclaration("text-overflow", "ellipsis");
function getElementsByDeclaration(property, value) {
  var elements;
  var i;
  var l;
  var nodes = document.querySelectorAll("*");

  for (i = 0, l = nodes.length; i < l; i++) {
    var node = nodes[i];

    if (window.getComputedStyle(node)[property] === value) {
      elements.push(node);
    }
  }

  return elements;
}

実際に使うことはなさそうだ。理由は簡単で、ループして列挙した要素群をもう一度ループしなくてはならないからだ。普通に書いた方がかなり速くなることだろう。また計算済みスタイルの値に依存するので、特定の文字列を値としてとるプロパティーしか探せない。

こういったCSSで機能を追加する(変更する、削除する)ことによって失われるもののフォローを簡単に行える手法は必要なのではないだろうか。標準化する必要があるかというとかなり疑問だが、NodeListへの便利関数の解放で簡単になるであろうと考えられる。上のような簡単な関数にイテレーターを渡せるようにするなどでも悪くはないが、やはり便利関数くださいというところに落ち着くだろう。