软件开发培训班 >> 编程开发 >> JavaScript


Mootools 1.2教程 设置和获取样式表属性

　　本文标签：Mootools,样式表属性

欢迎开始这一系列的教程的第七讲 。今天，我们来看一下如何通过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）或者变量而不需要引号：
参考代码：
复制代码 代码如下:

// 这个把变量firstBackgroundColor的值设置为字符串（STRING）#eeeeee
var firstBackgroundColor = #eeeeee;
// 你可以把一个变量传递给另外一个变量
// 这使得变量backgroundColor的值也等于字符串（string）#eeeeee
var backgroundColor = firstBackgroundColor;
// 这个把变量divWidth的值设置为数字（NUMBER）500
var divWidth = 500;
$(body_wrap).setStyles({
// 在这种情况下，变量名是不需要用引号包围起来的
width: divWidth,
// 数字也一样，不需要引号包围
height: 1000,
// 另外一个变量
background-color: backgroundColor,
// 字符串就是用单引号引起来的一系列字符组成的串
color: black
});

.getStyles();
这个方法可以让你一次获得多个样式属性 。这个和我们看到的上面的略有一些不同，因为它包含了多个数据集，每个数据集有一个键（key，属性名）和一个值（value，属性值） 。这个数据集叫做对象，.getStyles();方法可以非常容易地把多个属性值放入这些对象中，并可以很简单地把它们取回来 。
参考代码：
复制代码 代码如下:

// 首先为你的对象定义一个变量
// 然后创建一个选择器
// 然后把.getStyles添加到你的选择器
// 然后创建一个用逗号分隔开的样式属性列表
// 确保每个属性都在一个单引号中
var bodyStyles = $(body_wrap).getStyles(width, height, background-color);
// 首先我们创建一个对象来保存这个属性值
// 然后我们通过指定的属性的名（键）来得到一个值
// 把属性名放在两个方括号[]之间
// 并确保属性名已经用单引号引起来了
var bgStyle = bodyStyles[background-color];

如果在我们的CSS文件中有这样的样式定义：
参考代码：
复制代码 代码如下:

#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 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包

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

更多关于样式表的内容

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