素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

要素を背景のように使用する(選択もコピーもされない)

XUL Apps > Text Shadow - outsider reflexで、XBLを使って、コピーも選択もされない要素を作成するというテクニックが紹介されている。
Greasemonkeyスクリプトの場合この方法はとれないが、Mozillaの拡張CSSを使ってそれらしいことを実現できる。

コードは下の通り。

var elem = document.createElement("div"),
s = elem.style;
elem.textContent = new Date().toLocaleDateString();
s.fontSize = "8em";
s.position = "absolute";
s.margin = "0 auto";
s.top = "100px";
s.left = "50px";
s.opacity = "0.2";
s.cursor = "default";
s.MozUserSelect = "none";
document.body.appendChild(elem)

CSSの-moz-user-selectをnoneにすると、中のテキストが選択されなくなる。
後は、z-indexで、背景として潜り込ませればOK。
意外と簡単。