在javascript中添加要叠加的文本

Question

我在JavaScript中使用了一些透明叠加源：

function grayOut(vis, options) 
{
  var options = options || {}; 
  var zindex = 50;
  var opacity = 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');

  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page
        tnode.style.display='none';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later

        tbody.appendChild(tnode);

        /*
var pTag = document.createElement("P");
        var txtProcessing = document.createTextNode("Processing GIF...");
        tnode.appendChild(txtProcessing);
*/
  }

  if (vis) 
  {
    // Calculate the page width and height 
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) 
    {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } 
    else if( document.body.offsetWidth ) 
    {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } 
    else 
    {
       var pageWidth='100%';
       var pageHeight='100%';
    }   
    //set the shader to cover the entire page and make it visible.

    dark.style.opacity=opaque;                      
    dark.style.MozOpacity=opaque;                   
    dark.style.filter='alpha(opacity='+opacity+')'; 
    dark.style.zIndex=zindex;        
    dark.style.backgroundColor=bgcolor;  
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display='block';

    var txt = document.createTextNode("This text was added.");
    dark.appendChild(txt);   
  } 
  else 
  {
     dark.style.display='none';
  }
}

我的问题是我试图在透明层上显示一些文字，但我无法让它工作。有什么想法吗？

Answer 1

您的文本节点是在叠加层上创建的，但是文本颜色不可见。

检查Fiddle，其中文字颜色设置为红色。

dark.style.color = 'red';