首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

javasricpt操作网页根本元素

2012-11-10 
javasricpt操作网页基本元素取得网页基本元素大家一般都是采用是jQuery 正如我其他的文章里说到:jQuery有

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

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

范例代码:

<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>

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

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

热点排行