取得网页基本元素大家一般都是采用是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的值来使元素以不同的颜色来显示。
分享到:
相关推荐
通过深入研究《JavaScript特效经典宝典》,开发者不仅能掌握JavaScript特效的基本技巧,还能理解如何在实际项目中运用这些知识,从而提升网页的交互性和吸引力。这份资料无疑是开发者提升技能、拓宽视野的理想选择。
8. **事件委托**:为了提高性能,开发者可能会采用事件委托策略,只在父元素上绑定事件监听器,然后通过事件冒泡机制处理子元素的事件,减少内存占用和性能开销。 9. **前端框架或库**:虽然描述中没有明确提及,但...
Document Object Model (DOM) 是HTML和XML文档的结构化表示,JavaScript通过DOM可以对网页元素进行操作,如增删改查。熟悉DOM节点、属性、事件处理函数等概念是网页动态效果实现的关键。 三、BOM对象 Browser ...
我们可以通过FileReader接口读取图片,然后利用Canvas元素进行处理。 二、等比例压缩 等比例压缩是保持图片长宽比不变,调整图片尺寸的过程。这是为了避免压缩后图片变形。在JavaScript中,我们可以先获取原始图片...
同时采用当前正在流行的 J2EE 技术开发,采用 jsp 用户界面更加的友好简单易操作。当今论坛的界面设计非常的炫耀富丽,用户体验非常的良好,主要要到了jquery 这个流行的 JavaScript 框架。 在开发中选择了 struts2...