特定のstyleがあたったelementを取得する方法

css html5

朝っぱらから、 @mutuki @agektmr @Shumpei @os0x などを巻き込んでしまいました。 ありがとうございます！

やりたかったこと

  • Webページ内の画面遷移を引き起こすクリッカブルな要素の全抽出がしたい。
  • とりあえず a タグを取り出したけど、最近はdivとかimageにjsでイベントはって、pointer: cursorとかスタイルを当ててるケースも多いからこれも取り出したい。

とりあえずやったこと

$('*').filter(function(){
  return $(this).css('cursor') === 'pointer'; 
});
$('*').filter(function(i, elm){
  return window.getComputedStyle(elm, null).getPropertyValue('cursor') === 'pointer';
});

総当りはちょっといやです。

querySelectorでなんとかならかないか？

結局、styleの順序やなにが設定されているかは、わからないので

querySelectorAll('[style*=pointer]')

しか、ないみたいです。もちろんコレだと、computedStyleではないので、cssで記述されている場合には引っかかりません... orz

まとめ

結局、そんな都合のいいAPIはなく

  1. styleで指定されているものだけでもいい => querySelectorAll([style*=pointer])
  2. 遅くても全部欲しい => $('*').filter(function(i, elm){return window.getComputedStyle(elm, null).getPropertyValue('cursor') === 'pointer';});

ですね・・・

css3 attribute-selectors