DIV CSS 佈局教程網

我們已經學習過如何來選取DOM元素，怎麼創建數組，怎麼創建函數，怎麼把事件添加到元素，今天我們來深入地學習一下如果操縱HTML元素。通過MooTools 1.2，你可以添加新元素到一個HTML頁面中，也可以刪除元素，以及改變任何樣式或者元素參數，這些都非常容易。

基本方法

.get();

這個工具可以讓你獲取元素的屬性（property）。元素的屬性是組成一個HTML元素的各種不同部分，例如src、value、name等等。使用.get();方法非常簡單：

參考代碼： [復制代碼] [保存代碼]

1. // 下面這行將返回id為“id_name”的元素的html標記名（div、a、span……）
2. $('id_name').get('tag');

參考代碼： [復制代碼] [保存代碼]

1. <div id="body_wrap">
2.     <span id="id_name">Element</span> <!-- 上面的代碼將返回“span” -->
3. </div>

你可以使用.get();方法獲得更多屬性，而不只是html標記名：

• id
• name
• value
• href
• src
• class（如果有多個CSS類名，則將返回全部CSS類名）
• text （一個元素的文本內容）
• 等等…

.set();

.set();方法和.get();方法一樣，不過不是獲得一個值，而是設置一個值。當和事件聯合使用時比較有用，通過這個方法你可以在頁面加載之後改變一些屬性值。

參考代碼： [復制代碼] [保存代碼]

1. // 這將設置id為id_name的元素鏈接地址為“http://www.google.com”
2. $('id_name').set('href', 'http://www.google.com');

參考代碼： [復制代碼] [保存代碼]

1. <div id="body_wrap">
2.     <!-- 上面的代碼將改變鏈接地址為“http://www.google.com”  -->
3.     <a id="id_name" href="http://www.yahoo.com">Search Engine</a>
4. </div>

.erase();

通過.erase();方法，你可以清除一個元素的屬性值。它和前面兩個方法類似。選取元素，然後選擇你要清除的屬性。

參考代碼： [復制代碼] [保存代碼]

1. // 這講移除id為id_name的元素的href屬性
2. $('id_name').erase('href');

參考代碼： [復制代碼] [保存代碼]

1. <div id="body_wrap">
2.     <!-- 上面的代碼將清除鏈接地址 -->
3.     <a href="http://www.yahoo.com">Search Engine</a>
4. </div>

移動元素

.inject();

要移動頁面上一個已經存在的元素，你可以使用.inject();方法。和我們看到的其它方法類似，它用起來也非常簡單，可以在你的用戶界面上給你更多操控權。要使用.inject();方法，首先要設置一些包含元素變量：

參考代碼： [復制代碼] [保存代碼]

1. var elementA = $('elemA');
2. var elementB = $('elemB');
3. var elementC = $('elemC');

上面的代碼把下面這個HTML分別賦值給了不同的變量，這樣用MooTools來操作時會比較簡單。

參考代碼：&n