マウスカーソル位置の色情報取得スクリプト：Google AdSenseやAmazonアソシエイト等での色設定に苦労していませんか？ Part.1

Google AdSenceやAmazon アソシエイト等でのフォントカラーや背景色の指定は、貼り付けたいページの色に合わせたい所。

しかし、その色情報をスタイルシート等から探そうとすると、思いのほか苦労し時間が掛るものです。

目の前に見えているのに、色の情報の取得に時間がかかる・・・そんな手間を省くために、今回はマウスカーソル位置の色情報を取得するスクリプトを組んでみました。

私がこれまで行ってきた方法は、次の通り。

1. （初期）CSSファイルからから色情報を適当に拾って、あたりをつけ正解に辿りつくまで繰り返す。
   →スタイルシートファイルが複数あったり、継承に継ぐ継承、HTMLへの直接記載により、どの定義の色が採用されているかあたりがつけづらく時間がかかる。。
   
2. （中期）自前のソフトSTYLE Diverで、HTMLエレメント毎に適用されているスタイル定義情報(currentStyleプロパティ)を取得。
   →currentStyleプロパティは、最終的に適用されたスタイル定義が分かり便利だが、その定義が透過"transparent"の場合は、親階層を追いかける必要があり手間。
   またHTMLエレメントがツリー構造で表示されるとはいえ、対象となるHTMLエレメントを特定する事が手間。
   
3. （今回）いい加減手間が面倒になったので、マウスカーソル位置にあるHTMLエレメントに適用された色情報(currentStyleプロパティ)の情報を取得するスクリプトを作成。
   

マウスカーソル位置の色情報取得スクリプトの考慮点・方針等。

• JavaScriptで作成。
• 極力シンプルな作りを意識。（Bookmarklet化を意識）
• onmouse～系のイベント発生時に、イベント対象のHTMLエレメントに適用されている色情報を表示。
• 取得した色情報が透過"transparent"の場合は、親階層のHTMLエレメントを追跡し透過"transparent"じゃない値を取得。
• 極力シンプルな作りを目指すという事から表示制御に労力をかけない様、HTMLエレメントのTitle属性に値を突っ込み表示する事にする。（手抜きじゃありませぬ・・・）

マウスカーソル位置の色情報取得スクリプト(IE版)

document.body.onmousemove=function(){
function parentStyle(objSetTgt,strSetStyle){
var objTgt = objSetTgt;
while(objTgt.currentStyle[strSetStyle]=="transparent"){
objTgt = objTgt.parentElement;
if (objTgt==null)return "";
};
return objTgt.currentStyle[strSetStyle];
};

var objElm = event.srcElement;
var strHTML = "";
var strStyle = "";
strHTML+="tagName:" + objElm.tagName;
strStyle="color";
strHTML+="n" + strStyle + ":" + parentStyle(objElm,strStyle);
strStyle="borderColor";
strHTML+="n" + strStyle + ":" + parentStyle(objElm,strStyle);
strStyle="backgroundColor";
strHTML+="n" + strStyle + ":" + parentStyle(objElm,strStyle);
event.srcElement.title=strHTML;
}

↑上記のスクリプトを、DHTML DiverのexecScriptで実行すれば（参照しているページ上でJavaScriptを実行できれば何のツールでも構いません。）マウスカーソル位置の色情報が表示されます。

マウスカーソル位置にあるエレメントの情報取得スクリプト動作イメージ。（Title属性を利用して表示。）

マウスカーソル位置にあるエレメント情報の表示内容

• tagName：エレメントのタグ名
• color：フォントの色
• borderColor：枠線の色
• backgroundColor：背景の色

Title属性を利用しているので、元々Titleタグに設定されていた情報が消えてしまう点と、しばらく時間が立つと表示が消えてしまう点が課題ですが、色情報の取得には重宝するかと思いますので使って見て下さい。

次は、クリックするだけで使える様にブックマークレット化だな。。

Part.2へ続く