javasricpt操作网页基本元素

取得网页基本元素大家一般都是采用是jQuery 正如我其他的文章里说到：jQuery有取得网页基本元素进行操作的功能。在这我要说的是：采用我们最基本的javasricpt事件处理机制来操作网页基本元素。

范例：
本范例要实现的功能是对网页中的一行文字进行操作：当鼠标移动大该行文字上的时候，文字出现下划线；当鼠标移开时，下划线消失；当单击该行文字时，文字出现上划线；双击文字时，出现删除线。在本例中用到的网页元素是分段元素<P>，通过鼠标事件来改变它的属性textDecoration的值，从而达到上述效果。
textDecoration的不同值对应的显示效果如下：
none：没有任何划线效果；
underline：显示下划线；
overline：显示上划线；
line-through：显示删除线。

范例代码：
[color=blue]
<script Language="javascript">
function ad_underline(){
pl.style.textDecoration ="underline"
}

function de_line(){
pl.style.textDecoration ="none"
}

function ad_overline(){
pl.style.textDecoration ="overline"
}

function ad_throughline(){
pl.style.textDecoration ="line-through"
}
</script>

<h1 id="pl" onmouseOver="ad_underline()" onmouseOut="de_line()" onClick="ad_overline()" onDblclick="ad_throughline()">
javasricpt操作网页基本元素</h1>[/color]

本例实现了在网页中写入一个网页元素，然后通过一系列事件来控制该元素的显示效果。也可以用第二种方法直接实现对文本pl的操作：οnclick=pl.style.textDecoration.online来代替onClick="ad_overline()" 效果是完全一样的。

扩展：
可以改变Color的值来使元素以不同的颜色来显示。