Mootools1.2教程設置和獲取樣式表屬性_Mootools

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:44:20

Mootools1.2教程設置和獲取樣式表屬性_Mootools

Mootools1.2教程設置和獲取樣式表屬性_Mootools:歡迎開始這一系列的教程的第七講。今天，我們來看一下如何通過MooTools 1.2和我們以前幾講中的內(nèi)容來操作樣式，這將給你在UI上帶來很大的控制權(quán)。處理樣式非常簡單，不過今天我們要做一些調(diào)整。例如，我們要介紹鍵值對（key-value pair）對象。我們也會講

推薦度：

點擊下載本文 文檔為doc格式

導讀Mootools1.2教程設置和獲取樣式表屬性_Mootools:歡迎開始這一系列的教程的第七講。今天，我們來看一下如何通過MooTools 1.2和我們以前幾講中的內(nèi)容來操作樣式，這將給你在UI上帶來很大的控制權(quán)。處理樣式非常簡單，不過今天我們要做一些調(diào)整。例如，我們要介紹鍵值對（key-value pair）對象。我們也會講

歡迎開始這一系列的教程的第七講。今天，我們來看一下如何通過MooTools 1.2和我們以前幾講中的內(nèi)容來操作樣式，這將給你在UI上帶來很大的控制權(quán)。處理樣式非常簡單，不過今天我們要做一些調(diào)整。例如，我們要介紹鍵值對（key-value pair）對象。我們也會講到在domready之外來傳遞變量，就像我們在關于函數(shù)的那一講中學到的一樣。從這里開始，我們會開始慢慢提高難度，介紹一些必要的編程概念。如果你是JavaScript新手或者第一次開始學MooTools，請確保你在明白了前面的教程，你可以隨意地問我任何問題。
基本方法
.setStyle();
這個函數(shù)可以允許你設置一個元素的樣式屬性。我們在前面的一些例子中已經(jīng)使用過了。你要做的就是把它放在你的選擇器之后，那么它將改變一個元素或者多個元素的樣式屬性。
參考代碼：
代碼如下:
// 定義你的選擇器
// 添加.setStyle方法
// 指定樣式屬性和值
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');

參考代碼：
代碼如下:

.getStyle();
同樣，這個方法就像它的字面意思一樣。.getStyle();將返回一個元素的一個屬性值。
參考代碼：
代碼如下:
// 首先，建立一個變量來保存這個樣式屬性值
var styleValue = $('body_wrap').getStyle('background-color');

如果我們在上面的例子中運行這個代碼，那么它將返回“#eeeeee”給變量styleValue。
設置和獲取多個樣式表屬性
.setStyles();
.setStyles();就像你所想象的那樣，可以讓你一次給一個元素或者一個元素數(shù)組設置多個屬性值。為了能夠同時設置多個樣式表屬性值，.setStyles();的語法略有一點不同。
參考代碼：
// 還是從你的選擇器開始，然后在后面加上.setStyles({
代碼如下:
$('body_wrap').setStyles({
// 下面的格式為：'property': 'value',
'width': '1000px',
'height': '1000px',
// 特別注意：最后一個屬性沒有逗號
// 如果有逗號，將不能跨瀏覽器
'background-color': '#eeeeee'
});

注意：實際上，屬性選擇器也可以不需要單引號，除非屬性名中有連接符“-”，比如在“background-color”中，為了保持簡單，給每個屬性選擇器都加上單引號更容易一些。
同時也要注意：屬性值可能更靈活多變一些（比如“100px”或者“#eeeeee”）。除了字符串（一個只有字母的串，我們會在以后的教程中更深入地講解這個），你也可以傳入數(shù)字（這可能在大多數(shù)情況下會被解釋為px）或者變量而不需要引號：
參考代碼：
代碼如下:
// 這個把變量firstBackgroundColor的值設置為字符串（STRING）'#eeeeee'
var firstBackgroundColor = '#eeeeee';
// 你可以把一個變量傳遞給另外一個變量
// 這使得變量backgroundColor的值也等于字符串（string）'#eeeeee'
var backgroundColor = firstBackgroundColor;
// 這個把變量divWidth的值設置為數(shù)字（NUMBER）500
var divWidth = 500;
$('body_wrap').setStyles({
// 在這種情況下，變量名是不需要用引號包圍起來的
'width': divWidth,
// 數(shù)字也一樣，不需要引號包圍
'height': 1000,
// 另外一個變量
'background-color': backgroundColor,
// 字符串就是用單引號引起來的一系列字符組成的串
'color': 'black'
});

.getStyles();
這個方法可以讓你一次獲得多個樣式屬性。這個和我們看到的上面的略有一些不同，因為它包含了多個數(shù)據(jù)集，每個數(shù)據(jù)集有一個鍵（key，屬性名）和一個值（value，屬性值）。這個數(shù)據(jù)集叫做對象，.getStyles();方法可以非常容易地把多個屬性值放入這些對象中，并可以很簡單地把它們?nèi)』貋怼?
參考代碼：
代碼如下:
// 首先為你的對象定義一個變量
// 然后創(chuàng)建一個選擇器
// 然后把.getStyles添加到你的選擇器
// 然后創(chuàng)建一個用逗號分隔開的樣式屬性列表
// 確保每個屬性都在一個單引號中
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
// 首先我們創(chuàng)建一個對象來保存這個屬性值
// 然后我們通過指定的屬性的名（鍵）來得到一個值
// 把屬性名放在兩個方括號[]之間
// 并確保屬性名已經(jīng)用單引號引起來了
var bgStyle = bodyStyles['background-color'];

如果在我們的CSS文件中有這樣的樣式定義：
參考代碼：
代碼如下:
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}

那么變量bgStyle將包含值“#eeeeee”。
注意：如果你要從你的樣式表對象中取得一個單獨的屬性，首先取得一個對象變量（在這個例子中是“bodyStyles”），然后使用方括號和單引號（['']），最后填入屬性名key（如width或者background-color）。就這么簡單！
代碼示例
在這個例子中，我們將使用我們剛才在上面學到的一些方法來獲取和設置樣式。在注意樣式屬性操作用法的同時，也要特別注意它本身的結(jié)構(gòu)。為了把我們的函數(shù)從domready中獨立出來，我們需要把那些變量傳遞到domready事件的函數(shù)中。我們通過給domready里面的函數(shù)傳遞一個參數(shù)來實現(xiàn)這個。注意點擊（click）事件使用了匿名方法——這可以讓我們從domready事件中把變量傳遞到外面的函數(shù)中。如果你第一遍沒有看懂，請不要著急，下面的例子可能會讓這些更清楚更明白一些：
參考代碼：
代碼如下:
// 這里是一些函數(shù)
// 注意這個函數(shù)有一個參數(shù)："bgColor"
// 這個是從domready事件中傳遞過來的
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
// 我們把playDiv傳遞給這個函數(shù)，從而可以操作這個元素
// 也可以讓我們避免重復地使用選擇器
// 在處理復雜的選擇器時很有用
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里面?zhèn)鬟^來的東西
var resetSIze = function(foo) {
foo.setStyles({
'height': 200,
'width': 200
});
}
window.addEvent('domready', function() {
// 因為我們要多次使用這個選擇器，所以我們把它賦值給一個變量
var playDiv = $('playstyles');
// 這里我們創(chuàng)建了一個包含幾個屬性的對象
var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color');
// 你可以通過調(diào)用屬性名來獲得樣式值然后傳遞給一個變量
var bgColor = bodyStyles['background-color'];
// 這里我們使用了一個匿名函數(shù)，從而我們可以把參數(shù)傳遞給domready外面的函數(shù)
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
$('border_color').addEvent('click', function(){
// 除了可以把一個樣式屬性傳遞給一個變量
// 你還可以在這里直接調(diào)用
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代碼：
參考代碼：
代碼如下:

這里是CSS代碼
參考代碼：
代碼如下:
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}