Menu

30天學會 MooTools 教學(7): 設置和獲取樣式表屬性

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

 

 

基本方法

.setStyle();

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

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


<div id="body_wrap">
    <div class="class_name"></div>
    <div class="class_name"></div>
    <div class="class_name"></div>
    <div class="class_name"></div>
</div>

 

.getStyle();

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


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

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


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

.setStyles();

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

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

 

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

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

// 這個把變量firstBackgroundColor的值設置為字符串（STRING）'#eeeeee'
var firstBackgroundColor = '#eeeeee';
 
// 你可以把一個變量傳遞給另外一個變量 
// 這使得變量backgroundColor的值也等於字符串（string）'#eeeeee'
var backgroundColor = firstBackgroundColor;
 
// 這個把變量divWidth的值設置為數字（NUMBER）500
var divWidth = 500;
 
$('body_wrap').setStyles({
    // 在這種情況下，變量名是不需要用引號包圍起來的
    'width': divWidth,
    // 數字也一樣，不需要引號包圍
    'height': 1000,
    // 另外一個變量
    'background-color': backgroundColor,
    // 字符串就是用單引號引起來的一系列字符組成的串
    'color': 'black'
});

 

.getStyles();

這個方法可以讓你一次獲得多個樣式屬性。這個和我們看到的上面的略有一些不同，因為它包含了多個數據集，每個數據集有一個鍵（key，屬性名）和一 個值（value，屬性值）。這個數據集叫做對象，.getStyles();方法可以非常容易地把多個屬性值放入這些對象中，並可以很簡單地把它們取回 來。 

// 首先為你的對象定義一個變量
// 然後創建一個選擇器
// 然後把.getStyles添加到你的選擇器
// 然後創建一個用逗號分隔開的樣式屬性列表 
// 確保每個屬性都在一個單引號中
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 
 
// 首先我們創建一個對象來保存這個屬性值
// 然後我們通過指定的屬性的名（鍵）來得到一個值
// 把屬性名放在兩個方括號[]之間
// 並確保屬性名已經用單引號引起來了
var bgStyle = bodyStyles['background-color'];

 

如果在我們的CSS文件中有這樣的樣式定義： 

#body_wrap {
    width: 1000px;
    height: 1000px;
    background-color: #eeeeee;
}

那麼變量bgStyle將包含值「#eeeeee」。

注意：如果你要從你的樣式表對象中取得一個單獨的屬性，首先取得一個對象變量（在這個例子中是「bodyStyles」），然後使用方括號和單引號（['']），最後填入屬性名key（如width或者background-color）。就這麼簡單！

 

代碼示例

在這個例子中，我們將使用我們剛才在上面學到的一些方法來獲取和設置樣式。在注意樣式屬性操作用法的同時，也要特別注意它本身的結構。為了把我們的 函數從domready中獨立出來，我們需要把那些變量傳遞到domready事件的函數中。我們通過給domready裡面的函數傳遞一個參數來實現這 個。注意點擊（click）事件使用了匿名方法——這可以讓我們從domready事件中把變量傳遞到外面的函數中。如果你第一遍沒有看懂，請不要著急， 下面的例子可能會讓這些更清楚更明白一些： 

// 這裡是一些函數
 
// 注意這個函數有一個參數："bgColor"
// 這個是從domready事件中傳遞過來的
var seeBgColor = function(bgColor) { 
    alert(bgColor);
}
 
var seeBorderColor = function(borderColor) {
    alert(borderColor);
}
 
// 我們把playDiv傳遞給這個函數，從而可以操作這個元素
// 也可以讓我們避免重複地使用選擇器
// 在處理複雜的選擇器時很有用
var seeDivWidth = function(playDiv) {
    // 我們再次開始獲得樣式屬性
    // 和我們在domready中用的getStyles獨立開來
    // 因為我們想使用當前的值
    // 這可以保持width是準確的
    // 即使它在domready事件之後被改變了
    var currentDivWidth = playDiv.getStyle('width');
    alert(currentDivWidth);
}
 
var seeDivHeight = function(playDiv) {
    var currentDivHeight = playDiv.getStyle('height');
    alert(currentDivHeight);
}
 
var setDivWidth = function(playDiv) {
    playDiv.setStyle('width', '50px'); 
}
 
var setDivHeight = function(playDiv) {
    playDiv.setStyle('height', '50px');
}
 
// 注意，在這個時候，這個變量可以取任何名稱
// 它會傳遞任何值，value或者element或者你的任何東西
// 它將會取代任何在domready裡面傳過來的東西
var resetSIze = function(foo) {
    foo.setStyles({
        'height': 200,
        'width': 200
    });
}
 
window.addEvent('domready', function() {
    // 因為我們要多次使用這個選擇器，所以我們把它賦值給一個變量
    var playDiv = $('playstyles');
 
    // 這裡我們創建了一個包含幾個屬性的對象
    var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); 
 
    // 你可以通過調用屬性名來獲得樣式值然後傳遞給一個變量
 
    var bgColor = bodyStyles['background-color']; 
 
    // 這裡我們使用了一個匿名函數，從而我們可以把參數傳遞給domready外面的函數 
    $('bgcolor').addEvent('click', function(){
        seeBgColor(bgColor);
    });
 
    $('border_color').addEvent('click', function(){
        // 除了可以把一個樣式屬性傳遞給一個變量 
        // 你還可以在這裡直接調用
        seeBorderColor(bodyStyles['border-bottom-color']);
    });
 
    $('div_width').addEvent('click', function(){
        seeDivWidth(playDiv);
    });
 
    $('div_height').addEvent('click', function(){
        seeDivHeight(playDiv);
    });
 
    $('set_width').addEvent('click', function(){
        setDivWidth(playDiv);
    });
 
    $('set_height').addEvent('click', function(){
        setDivHeight(playDiv);
    }); 
 
    $('reset').addEvent('click', function(){
        resetSIze(playDiv);
    });
});

 

這裡是HTML代碼： 

<div id="playstyles"> </div>
    <br />
    <button id="bgcolor">See background-color</button>
    <button id="border_color">See border-bottom-color</button><br /><br />
    <button id="div_width">See width</button>
    <button id="div_height">See height</button><br /><br />
    <button id="set_width">Set weight to 50px</button>
    <button id="set_height">Set height to 50px</button><br /><br />
    <button id="reset">Reset size</button>

 

這裡是CSS代碼 

#playstyles {
    width: 200px
    height: 200px
    background-color: #eeeeee
    border: 3px solid #dd97a1
}


更多學習...

下載一個包含你開始所需要的所用東西的zip包
包含MooTools 1.2核心庫，一個外部JavaScript文件，一個簡單的HTML頁面和一個CSS文件。

 

更多關於樣式表的內容

要學習更多關於樣式表的內容，請查閱MooTools文檔中的Element.Style部分。


Mootools 教學列表：