その買うを、もっとハッピーに。|ハピタス

CSSで固定してる広告を固定解除するブックマークレット

需要がないのか分からないけど、CSSで固定してるウザい広告を非表示にするなり固定解除するブックマークレットがないのか検索しても見つかりませんでした。
なので前々から作れたらいいなとは思ってたのですが、ようやく作った感じです。
概要としてはposition: fixed;になってる要素を全てstaticに変えるといったものです。
つまり広告だけではなく、固定している箇所全てが固定解除となります。
こうしたのは、class名などサイトによっても違うと思うし固定してる広告の要素が特定出来なかったという事情と、広告でなくても固定って不愉快な事が多いと思うので、これでまぁいいかなと思いました。
メニューとかくらいは固定でもあまり何も思わないけど、よく端にあるFollow Meボタンとか、ウザいですよね。

javascript:(function(){elm=document.getElementsByTagName("*");for(i=0;i<elm.length;i++){s=elm[i].currentStyle||document.defaultView.getComputedStyle(elm[i],"");if(s.position=="fixed"){elm[i].style.setProperty("position","static","important");}}})();

getComputedStyle


初めgetComputedStyleを使ってなくて躓きました。
ブラウザの要素解析で確かに広告の範囲がfixedになってるのに、何故ifを通らない!と悩みました。
JavaScriptCSSのプロパティを取得するのは、「要素.style.プロパティ」で出来ますが、実はこれだとインラインのCSSを操作することになるんですね。
大抵は外部CSSで設定していると思いますから、これでは都合が悪いです。
そこで見つけたのがgetComputedStyleで、これはインライン以外のCSSを取得出来ます。
しかし、取得しか出来ず書き込みは出来ません。
また、クロスブラウザ対策ということでcurrentStyleも合わせて使ってます。

setProperty


getComputedStyleでは書き込みが出来ないということで、初めは「要素.style.プロパティ」でstaticを設定してたのですが、どうもアメブロ上部のメニューバーが固定解除されないので、何故だろうと要素解析してみると、「position:fixed !important;」となってました。
つまり、インラインよりも優先されてしまうので、固定が解除されない訳です。
ということで、importantが設定出来ないか調べてみると、setPropertyがありました。
setPropertyの記述だと、アメブロ上部のメニューバーも固定解除されました。
まぁ、アメブロのメニューバーは不愉快ってものでもないけど(笑)