#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> </div>
<br />
<button>See background-color</button>
<button>See border-bottom-color</button><br /><br />
<button>See width</button>
<button>See height</button><br /><br />
<button>Set weight to 50px</button>
<button>Set height to 50px</button><br /><br />
<button>Reset size</button>
这里是CSS代码
参考代码：
复制代码 代码如下:
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
更多学习...
包含MooTools 1.2核心库，一个外部JavaScript文件，一个简单的HTML页面和一个CSS文件。
更多关于样式表的内容
要学习更多关于样式表的内容，请查阅MooTools文档中的Element.Style部分。