jQueryを使わない方法「特定のエレメントに透明度の設定を加える」

2015年1月19日

Javascript Tips プログラミング

写真素材にフォントを半透明で乗せたりすると、非常にいい感じのロゴができたりもする。 CSS3以前から、alpha値を設定することはできたのだが、css2の時は、ブラウザ毎の方言が非常に激しかった。 そこで、僕が使っていたライブラリから、持ってきてみた。

概要

旧IEに対応しているが、最新のIE11は未チェック・・・ ※不具合あればコメントください。

仕様

param @ e : サイズを取得したいエレメント param @ n : 透明度の値を入力 [0.0 - 1.0] return @ [type:element(object)] *alpha値の変更されたエレメントが帰る。

Code

(function(){ var $$={}; $$.alpha = function(e , n){ //IE if (navigator.userAgent.indexOf("MSIE")!=-1){ if (n < 0){ n = parseInt(parseFloat(RegExp.$1) + (n)); if (n <= 0) {n = 0;} else if (n >= 100) {n = 100;} } e.style.filter = 'alpha(opacity='+n+')'; } //FireFox; else if (navigator.userAgent.indexOf("Firefox")!=-1){ if (n < 0){ if (n <= 0) {n = 0;} else if (n >= 1) {n = 1;} }else{n = n/100;} e.style.opacity = n; } //Opera & Safari; else if ((navigator.userAgent.indexOf("Opera")!=-1)||(navigator.userAgent.indexOf("Safari")!=-1)){ if (n < 0){ if (n <= 0) {n = 0;} else if (n >= 1) {n = 1;} }else{n = n/100;} e.style.opacity = n; } //Netscape; else if (navigator.userAgent.indexOf("Netscape")!=-1){ if (n < 0){ if (n <= 0) {n = 0;} else if (n >= 1) {n = 1;} }else{n = n/100;} e.style.MozOpacity = n; } return e; }; //グローバル変数へ格納 window.$$LIB = $$; //プログラム構造を返す(別変数に格納できる) return $$; })();

使い方

$$LIB.alpha(document.getElementById("hoge")); ※返り値がありますが、送るだけでエレメントの値が変更されます。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。