我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数,这些都非常容易。
基本方法
.get();
这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:
参考代码:
[url=http://www.yahoo.com]</div>
.erase();
通过.erase();方法,你可以清除一个元素的属性值。它和前面两个方法类似。选取元素,然后选择你要清除的属性。
参考代码:
// 这讲移除id为id_name的元素的href属性
$('id_name').erase('href');
参考代码:
<div id="body_wrap">
<!-- 上面的代码将清除链接地址 -->
<a href="http://www.yahoo.com">Search Engine</a>
</div>
移动元素
.inject();
要移动页面上一个已经存在的元素,你可以使用.inject();方法。和我们看到的其它方法类似,它用起来也非常简单,可以在你的用户界面上给你更多操控权。要使用.inject();方法,首先要设置一些包含元素变量:
参考代码:
[url=http://docs.mootools.net/Element/Element]Element[/url]这一节包含了我们这里讲到的大多数内容,还有很多其它内容
[*][url=http://docs.mootools.net/Element/Element.Style]Element.style[/url]可以给你在元素样式属性上更多的控制权(有些东西我们将在以后的教程中深入讲解)
[/*][*][url=http://docs.mootools.net/Element/Element.Dimensions]Element.dimentions[/url]包含了处理位置、坐标、尺寸大小等东西的工具[/*][/list]