DIV CSS 佈局教程網

歡迎開始這一系列的教程的第七講。今天，我們來看一下如何通過MooTools 1.2和我們以前幾講中的內容來操作樣式，這將給你在UI上帶來很大的控制權。處理樣式非常簡單，不過今天我們要做一些調整。例如，我們要介紹鍵值對（key-value pair）對象。我們也會講到在domready之外來傳遞變量，就像我們在關於函數的那一講中學到的一樣。從這裡開始，我們會開始慢慢提高難度，介紹一些必要的編程概念。如果你是JavaScript新手或者第一次開始學MooTools，請確保你在明白了前面的教程，你可以隨意地問我任何問題。

基本方法

.setStyle();

這個函數可以允許你設置一個元素的樣式屬性。我們在前面的一些例子中已經使用過了。你要做的就是把它放在你的 選擇器之後，那麼它將改變一個元素或者多個元素的樣式屬性。

1. // 定義你的選擇器
2. // 添加.setStyle方法
3. // 指定樣式屬性和值
4. $('body_wrap').setStyle('background-color', '#eeeeee');
5. $$('.class_name').setStyle('background-color', '#eeeeee');

1. <div id="body_wrap">
2.     <div class="class_name"></div>
3.     <div class="class_name"></div>
4.     <div class="class_name"></div>
5.     <div class="class_name"></div>
6. </div>

.getStyle();

同樣，這個方法就像它的字面意思一樣。.getStyle();將返回一個元素的一個屬性值。

1. // 首先，建立一個變量來保存這個樣式屬性值
2. var styleValue = $('body_wrap').getStyle('background-color');

如果我們在上面的例子中運行這個代碼，那麼它將返回“#eeeeee”給變量styleValue。

設置和獲取多個樣式表屬性

.setStyles();

.setStyles();就像你所想象的那樣，可以讓你一次給一個元素或者一個元素數組設置多個屬性值。為了能夠同時設置多個樣式表屬性值，.setStyles();的語法略有一點不同。

1. // 還是從你的選擇器開始，然後在後面加上.setStyles({
2. $('body_wrap').setStyles({
3.     // 下面的格式為：'property': 'value',
4.     'width': '1000px',
5.     'height': '1000px',
6.     // 特別注意：最後一個屬性沒有逗號 
7.     // 如果有逗號，將不能跨浏覽器
8.     'background-color': '#eeeeee'
9. });

注意：實際上，屬性選擇器也可以不需要單引號，除非屬性名中有連接符“-”，比如在“background-color”中，為了保持簡單，給每個屬性選擇器都加上單引號更容易一些。

同時也要注意：屬性值可能更靈活多變一些（比如“100px”或者“#eeeeee”）。除了字符串（一個只有字母的串，我們會在以後的教程中更深入地講解這個），你也可以傳入數字（這可能在大多數情況下會被解釋為px）或者變量而不需要引號：

1. // 這個把變量firstBackgroundColor的值設置為字符串（STRING）'#eeeeee'
2. var firstBackgroundColor = '#eeeeee';