Mootools 1.2教程(7)——设置和获取样式表属性（2）

代码示例

在这个例子中，我们将使用我们刚才在上面学到的一些方法来获取和设置样式。在注意样式属性操作用法的同时，也要特别注意它本身的结构。为了把我们的函数从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包（27.88 KB）

asp之家下载地址：mootorial_day7_styles.zip （27.88 KB）

包含MooTools 1.2核心库，一个外部JavaScript文件，一个简单的HTML页面和一个CSS文件。

更多关于样式表的内容

要学习更多关于样式表的内容，请查阅MooTools文档中的Element.Style部分。