Mootools 1.2教程 设置和获取样式表属性
2024-05-06 14:13:58
供稿：网友
欢迎开始这一系列的教程的第七讲。今天，我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式，这将给你在UI上带来很大的控制权。处理样式非常简单，不过今天我们要做一些调整。例如，我们要介绍键值对（key-value pair）对象。我们也会讲到在domready之外来传递变量，就像我们在关于函数的那一讲中学到的一样。从这里开始，我们会开始慢慢提高难度，介绍一些必要的编程概念。如果你是JavaScript新手或者第一次开始学MooTools，请确保你在明白了前面的教程，你可以随意地问我任何问题。
基本方法
.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）或者变量而不需要引号：
