こっそりと特定の要素をマーキングし取得する

JavaScript uupaa.js

CSS + JavaScript(uupaa.jsも)を使い、ユーザに悟られないように要素をマーキングし、要素を特定する方法です。

昨日までの一連のエントリから、ユーザに知られずに要素をマーキングする妥当な方法がやっと見つかりました。

IE なら ruby-align: center を、その他のブラウザなら outline: 0 solid black を使う。

  • outline: は各ブラウザともバグだらけで、まだまだ現役で使えないプロパティだから、こういう用途にはもってこい
  • outline: 0px solid black を指定すると実際は描画されない(描画されているかもしれないが見えない)
  • IE は outline: に対応していないため、ruby-align で代用する。ruby-align は IE 独自機能なので安心して使える。

できた。

以下が、CSS :hover と一致する要素を検索する関数となります。関数名は適当です。
同じ要領で、a:visited や a:link, :focus もやれます。

function getHoverElement(element) {
  var rv, cs, index;
  if (uu.ua.ie) { // IE用
     // 検索する直前にスタイルシートにスタイルを追加
    index = uu.css.insertRule(":hover { ruby-align: center }"); // スタイルシートにルールを追加する関数
    rv = (uu.css.get(element).rubyAlign === "center"); // element.currentStyle.rubyAlign 的な関数
  } else { // IE以外のブラウザ
    index = uu.css.insertRule(":hover { outline: 0 solid black }");
    cs = uu.css.get(element);
    rv = (s.outlineWidth === "0px" && s.outlineStyle === "solid");
  }
  uu.css.deleteRule(index); // スタイルシートからルールを除去する関数
  return rv;
}

ただし、この方法では、Opera9.2xで思うように要素が取得できませんでした。
Opera9.5+ ではちゃんと取れているので、Opera9.2xの数多いバグの一つなのかもしれません。
Opera9.2x の insertRule 関数がDOM仕様に準拠していない(追加したルールのインデックスを返さない)のが原因でした。対策したところOperaでもこっそり要素をマーキングすることが可能になりました。

反省会

  • たった10行の関数を書くために2日も費やす必要があったのか?
    • いつかは資料化する必要があったから、ついでにやったまでのこと。
    • こんなに各ブラウザの挙動不審が見つかるとは正直思っていなかった。