JavaScript で半透明な固定した領域を生成する

1. CSS で要素を固定し、半透明にする

JavaScript で半透明な固定した領域を生成したい。

要素の位置を固定するには、HTML において、CSS の position プロパティを fixed にする。

絶対的な位置に固定配置する によると、

「position：fixed」と距離を指定するプロパティは、指定された要素を絶対的に移動させて配置しますが、その要素はウィンドウ上のその位置に固定されて、スクロールしても位置が変わらなくなります

要素を半透明にするには、CSS で filter プロパティを設定する。

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG によると、

以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。

  filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;

 

2. JavaScript で要素を生成し、CSS のプロパティを設定する

JavaScript で DOM Element を生成し、CSS を設定する。

DOM Element を生成する方法は、以下を参照。

• JavaScript で特定の要素の前に要素を挿入する

CSS を設定するには、element.style を利用する。

var newElem = document.createElement("div");
var p = document.body.firstChild;    // この要素の前に newElem を挿入 
newElem.innerHTML = "挿入";
p.parentNode.insertBefore(newElem, p);

with(newElem.style){
    // 大きさ
    width = "100px";
    height = "100px";
    // 位置
    position = "fixed";
    top = "30px";
    left = "30px";
    // 背景の色
    backgroundColor = "red";
    // 透過度
    opacity = "0.7";
}

 

関連記事

• JavaScript で CSS の float 属性を設定
• JavaScript で特定の要素の前に要素を挿入する