|
|
基本方法
.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部分。
JavaScript技術：Mootools 1.2教程 設置和獲取樣式表屬性，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
