|
|
基本方法
.setStyle();
這個(gè)函數(shù)可以允許你設(shè)置一個(gè)元素的樣式屬性。我們?cè)谇懊娴囊恍├又幸呀?jīng)使用過(guò)了。你要做的就是把它放在你的 選擇器之后，那么它將改變一個(gè)元素或者多個(gè)元素的樣式屬性。
參考代碼：
復(fù)制代碼 代碼如下:
// 定義你的選擇器
// 添加.setStyle方法
// 指定樣式屬性和值
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
參考代碼：
復(fù)制代碼 代碼如下:
<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();
同樣，這個(gè)方法就像它的字面意思一樣。.getStyle();將返回一個(gè)元素的一個(gè)屬性值。
參考代碼：
復(fù)制代碼 代碼如下:
// 首先，建立一個(gè)變量來(lái)保存這個(gè)樣式屬性值
var styleValue = $('body_wrap').getStyle('background-color');
如果我們?cè)谏厦娴睦又羞\(yùn)行這個(gè)代碼，那么它將返回“#eeeeee”給變量styleValue。
設(shè)置和獲取多個(gè)樣式表屬性
.setStyles();
.setStyles();就像你所想象的那樣，可以讓你一次給一個(gè)元素或者一個(gè)元素?cái)?shù)組設(shè)置多個(gè)屬性值。為了能夠同時(shí)設(shè)置多個(gè)樣式表屬性值，.setStyles();的語(yǔ)法略有一點(diǎn)不同。
參考代碼：
// 還是從你的選擇器開(kāi)始，然后在后面加上.setStyles({
復(fù)制代碼 代碼如下:
$('body_wrap').setStyles({
// 下面的格式為：'property': 'value',
'width': '1000px',
'height': '1000px',
// 特別注意：最后一個(gè)屬性沒(méi)有逗號(hào)
// 如果有逗號(hào)，將不能跨瀏覽器
'background-color': '#eeeeee'
});
注意：實(shí)際上，屬性選擇器也可以不需要單引號(hào)，除非屬性名中有連接符“-”，比如在“background-color”中，為了保持簡(jiǎn)單，給每個(gè)屬性選擇器都加上單引號(hào)更容易一些。
同時(shí)也要注意：屬性值可能更靈活多變一些（比如“100px”或者“#eeeeee”）。除了字符串（一個(gè)只有字母的串，我們會(huì)在以后的教程中更深入地講解這個(gè)），你也可以傳入數(shù)字（這可能在大多數(shù)情況下會(huì)被解釋為px）或者變量而不需要引號(hào)：
參考代碼：
復(fù)制代碼 代碼如下:
// 這個(gè)把變量firstBackgroundColor的值設(shè)置為字符串（STRING）'#eeeeee'
var firstBackgroundColor = '#eeeeee';
// 你可以把一個(gè)變量傳遞給另外一個(gè)變量
// 這使得變量backgroundColor的值也等于字符串（string）'#eeeeee'
var backgroundColor = firstBackgroundColor;
// 這個(gè)把變量divWidth的值設(shè)置為數(shù)字（NUMBER）500
var divWidth = 500;
$('body_wrap').setStyles({
// 在這種情況下，變量名是不需要用引號(hào)包圍起來(lái)的
'width': divWidth,
// 數(shù)字也一樣，不需要引號(hào)包圍
'height': 1000,
// 另外一個(gè)變量
'background-color': backgroundColor,
// 字符串就是用單引號(hào)引起來(lái)的一系列字符組成的串
'color': 'black'
});
.getStyles();
這個(gè)方法可以讓你一次獲得多個(gè)樣式屬性。這個(gè)和我們看到的上面的略有一些不同，因?yàn)樗硕鄠€(gè)數(shù)據(jù)集，每個(gè)數(shù)據(jù)集有一個(gè)鍵（key，屬性名）和一個(gè)值（value，屬性值）。這個(gè)數(shù)據(jù)集叫做對(duì)象，.getStyles();方法可以非常容易地把多個(gè)屬性值放入這些對(duì)象中，并可以很簡(jiǎn)單地把它們?nèi)』貋?lái)。
參考代碼：
復(fù)制代碼 代碼如下:
// 首先為你的對(duì)象定義一個(gè)變量
// 然后創(chuàng)建一個(gè)選擇器
// 然后把.getStyles添加到你的選擇器
// 然后創(chuàng)建一個(gè)用逗號(hào)分隔開(kāi)的樣式屬性列表
// 確保每個(gè)屬性都在一個(gè)單引號(hào)中
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
// 首先我們創(chuàng)建一個(gè)對(duì)象來(lái)保存這個(gè)屬性值
// 然后我們通過(guò)指定的屬性的名（鍵）來(lái)得到一個(gè)值
// 把屬性名放在兩個(gè)方括號(hào)[]之間
// 并確保屬性名已經(jīng)用單引號(hào)引起來(lái)了
var bgStyle = bodyStyles['background-color'];
如果在我們的CSS文件中有這樣的樣式定義：
參考代碼：
復(fù)制代碼 代碼如下:
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}
那么變量bgStyle將包含值“#eeeeee”。
注意：如果你要從你的樣式表對(duì)象中取得一個(gè)單獨(dú)的屬性，首先取得一個(gè)對(duì)象變量（在這個(gè)例子中是“bodyStyles”），然后使用方括號(hào)和單引號(hào)（['']），最后填入屬性名key（如width或者background-color）。就這么簡(jiǎn)單！
代碼示例
在這個(gè)例子中，我們將使用我們剛才在上面學(xué)到的一些方法來(lái)獲取和設(shè)置樣式。在注意樣式屬性操作用法的同時(shí)，也要特別注意它本身的結(jié)構(gòu)。為了把我們的函數(shù)從domready中獨(dú)立出來(lái)，我們需要把那些變量傳遞到domready事件的函數(shù)中。我們通過(guò)給domready里面的函數(shù)傳遞一個(gè)參數(shù)來(lái)實(shí)現(xiàn)這個(gè)。注意點(diǎn)擊（click）事件使用了匿名方法――這可以讓我們從domready事件中把變量傳遞到外面的函數(shù)中。如果你第一遍沒(méi)有看懂，請(qǐng)不要著急，下面的例子可能會(huì)讓這些更清楚更明白一些：
參考代碼：
復(fù)制代碼 代碼如下:
// 這里是一些函數(shù)
// 注意這個(gè)函數(shù)有一個(gè)參數(shù)："bgColor"
// 這個(gè)是從domready事件中傳遞過(guò)來(lái)的
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
// 我們把playDiv傳遞給這個(gè)函數(shù)，從而可以操作這個(gè)元素
// 也可以讓我們避免重復(fù)地使用選擇器
// 在處理復(fù)雜的選擇器時(shí)很有用
var seeDivWidth = function(playDiv) {
// 我們?cè)俅伍_(kāi)始獲得樣式屬性
// 和我們?cè)赿omready中用的getStyles獨(dú)立開(kāi)來(lái)
// 因?yàn)槲覀兿胧褂卯?dāng)前的值
// 這可以保持width是準(zhǔn)確的
// 即使它在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');
}
// 注意，在這個(gè)時(shí)候，這個(gè)變量可以取任何名稱
// 它會(huì)傳遞任何值，value或者element或者你的任何東西
// 它將會(huì)取代任何在domready里面?zhèn)鬟^(guò)來(lái)的東西
var resetSIze = function(foo) {
foo.setStyles({
'height': 200,
'width': 200
});
}
window.addEvent('domready', function() {
// 因?yàn)槲覀円啻问褂眠@個(gè)選擇器，所以我們把它賦值給一個(gè)變量
var playDiv = $('playstyles');
// 這里我們創(chuàng)建了一個(gè)包含幾個(gè)屬性的對(duì)象
var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color');
// 你可以通過(guò)調(diào)用屬性名來(lái)獲得樣式值然后傳遞給一個(gè)變量
var bgColor = bodyStyles['background-color'];
// 這里我們使用了一個(gè)匿名函數(shù)，從而我們可以把參數(shù)傳遞給domready外面的函數(shù)
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
$('border_color').addEvent('click', function(){
// 除了可以把一個(gè)樣式屬性傳遞給一個(gè)變量
// 你還可以在這里直接調(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代碼：
參考代碼：
復(fù)制代碼 代碼如下:
<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代碼
參考代碼：
復(fù)制代碼 代碼如下:
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
更多學(xué)習(xí)...
下載一個(gè)包含你開(kāi)始所需要的所用東西的zip包
包含MooTools 1.2核心庫(kù)，一個(gè)外部JavaScript文件，一個(gè)簡(jiǎn)單的HTML頁(yè)面和一個(gè)CSS文件。
更多關(guān)于樣式表的內(nèi)容
要學(xué)習(xí)更多關(guān)于樣式表的內(nèi)容，請(qǐng)查閱MooTools文檔中的Element.Style部分。
JavaScript技術(shù)：Mootools 1.2教程 設(shè)置和獲取樣式表屬性，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
