Javascript DOM 编程实例讲解--仿LightBox效果提示框（4）

DOM的高级操作--创建/追加/删除节点、设置CSS样式、设置节点属性

还是拿刚才的代码，看看怎么运用这个方法获得节点：

<!--为了演示，所以才会每个li都加了样式，我们实际开发的时候是很少这么做的--> <ul id="newslist">   <li class="menu">First Line</li>   <li class="menu">Second Line</li>   <li class="menu">Third Line</li>   <li class="menu">Fourth Line</li>   <li class="menu">Fifth Line</li> </ul> <script language="javascript" type="text/javascript"> <!-- // 获取el节点内tag标签样式为name样式索引为size的DOM节点 function getElByClassName(tag,name,size,el){         if(!document.getElementsByTagName) return false;                   var el=(el)?el:document;         var itm=el.getElementsByTagName(tag);         var num=1;                   for(i=0;i<itm.length;i++){             if(itm[i].className===name&&size===num){                  return itm[i];             }             else if(itm[i].className===name){                  num++;             }         }         return false; } var liThree = getElByClassName("li","menu",3,document.getElementById("newslist")); alert(liThree.innerHTML); //--> </script>

哈哈，活学活用，才是我们学习的目的，不是吗？

DOM的高级操作--创建/追加/删除节点、设置CSS样式、设置节点属性

document.createElement(tagName)--创建节点

通过对前面基础知识的学习，我们现在开始正式讲解这个实例的实现过程了，接着开实例下面代码：

// 创建透明阴影遮照效果层
var shadow = document.createElement("div");

这样我们就通过document.createElement("div");创建了一个div节点，但是只是创建节点还是远远不够的，看看我们开头的原理分析，我们创建的这个层有特殊的position定位，而我们怎么来实现给它添加这些属性（Attribute）呢？

element.setAttribute--设置CSS样式

为什么我要用Attribute而不是Property呢？因为我接下来要介绍的一个DOM操作的方法element.setAttribute(AttributeName,value)--给节点设置属性。还是回到例子
shadow.setAttribute("id","shadow");

这样我就给我刚刚创建的div添加了一个id属性，值是shadow,相当于这么写：

<div id="shadow"></div>

为什么要给这个节点添加id？其实目的很简单，以便我们在以后的程序开发中使用document.getElementById查寻这个节点。

element.getAttribute(AttributeName)--获得属性

既然能够设置属性，我们就可以使用element.getAttribute(AttributeName)方法获得属性，举个例子：

<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
<script language="javascript" type="javascript">
<!--
var btn=document.getElementById("btnshow");
alert(btn.getAttribute("value"));
//-->
</script>

接下来就是要设置这个节点的position属性了，怎么做？看看我的代码：

shadow.style.position="absolute";　  　　
shadow.style.left="0";
shadow.style.top="0";
shadow.style.width="100％";
shadow.style.height="100％";
shadow.style.zIndex="10";

这么设置的结果就等于我们这么写CSS：

#shadow{
  position:absolute;
  left:0;
  top:0;
  width:100％;
  height:100％;
  z-index:10;
}

这么一写，我想大家就清楚现在的这个遮照层的样式是个什么样子了：一个用绝对定位的层，占满整个屏幕，z坐标为10。

这么一翻译，我想他的效果大家很清楚了，这里要说明是的position:absolute;达到的效果，虽然它占满了真个屏幕，但却不影响其他元素的布局，例子中的按钮的布局就没有受到影响。而至于position方法的说明，请看《Ajax标签导航实例详解》一文中对position定位的说明。

而在这里我要重点介绍的是怎么使用Javascript给一个DOM节点添加CSS样式？在Javascript里我们是通过style这个关键字来设置的，然后就是接着属性，最后给属性付值。就像这样

（element.style.property=value）：
shadow.style.zIndex="10";

呵呵，我为什么单单要拿z-index这个属性来讲呢？这里要讲一下设置CSS样式的语法：属性都必须是小写的，但是如z-index,background-color,text-decoration这样中间有连接符的属性，就采用骆驼华的写法，就是这样:

shadow.style.zIndex="1";
shadow.style.backgroundColor="#FFF";
shadow.style.textDecoration="24px";

现在大家清楚了怎么用javascript给一个节点设置样式了吧。其实还有更简单的方法，怎么个简单法？其实在我上面的代码就已经给出了答案，使用setAttribute()方法，大家看看下面的代码就清楚了。

// 创建提示框层节点
var obj=document.createElement("div");
obj.setAttribute("id","window");
obj.style.zIndex="999";

发现了什么问题没有？对了，在这里我创建了节点后，只是使用setAttribute()方法给节点设置了id 属性，而没有像设置shadow节点那样再给它添加CSS样式了，但是它的样式已经获得了，因为我早已经在之前的CSS代码写好样式了。

#window{
   position:absolute;
   left:50％;
   top:50％;
   width:400px;
   height:180px;
   margin:-90px 0 0 -200px;
}

所以这个更简单的方法就是事先就把要创建的节点的样式写好，就可以直接使用setAttribute()方法给节点设置一个于写好的CSS对应的id或class属性就可以了（给节点添加class属性，如：

element.setAttribute("class",className)）。

怎么给节点设置CSS样式，这里基本上就讲完了，还是回到我们的实例，看看，后来我又给shadow节点添加了什么样式：

// 如果是Opera浏览器则给shadow设置背景色和透明效果
if(!isOpear){
   shadow.style.backgroundColor="#06C";
    
   if(document.all){
     shadow.style.filter = "alpha(opacity=20)";
  }
  else{
     shadow.style.opacity = 0.2;
  }
}

对了，我们的shadow（阴影）是有一个半透明的效果的，所以我分别使用了shadow.style.filter = "alpha(opacity=20)";和shadow.style.opacity = 0.2;给它设置了透明的滤镜。其实就是一般的设置CSS样式。