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

欢迎开始这一系列的教程的第七讲。今天,我们来看一下如何通过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部分。

时间: 2009-09-13

浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

-任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件

我们将学习如何使用Fx.Morph(它从本质上可以让你同时渐变多个样式表属性),然后我们再检查一下应用到Fx.Tween和Fx.Morph的一些Fx选项,最后我们将看看如何使用Fx事件,譬如"onComplete"和"onStart".通过这些选项和事件,我们可以获得更好的控制权来控制形变动画. Fx.Morph 创建一个新的Fx.Morph 初始化一个新的形变和创建一个新的渐变很类似,除了你要指定多个样式属性以外. 参考代码: 复制代码 代码如下: // 首先,把

Mootools 1.2教程 Fx.Tween的使用

和我们看到的其他的MooTools函数一样,这些方法使用起来都非常简单,但是功能都很强大.Tween可以让你添加那些极"炫"的效果--可以很平滑地发生形变动画,从而改善你的用户体验. Tween的快捷方法 我们通常都从"基本知识"入手,不过MooTools 1.2只为渐变(tween)提供了这样极其出色的快捷方法,它们使用起来都极其简单以至于我忍不住要从这里开始. .tween(); 一个渐变(tween)是一个在两个样式属性值之间的平滑的变化.举个例子,通过渐变(

jQuery获取样式中的背景颜色属性值/颜色值

天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome.Firefox中则是以GRB格式显示rgb(255,0,0),由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { v

jquery attr()设置和获取属性值实例教程

语法: 1.attr("属性名"): //获取属性的值(取得第一个匹配元素的属性.通过这个方法可以方便的从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回undefined) 2.attr("属性名","属性值"); //设置属性的值(为所有匹配的元素设置一个属性值) 3.attr("属性名","函数值"); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函

Mootools 1.2教程 定时器和哈希简介

定时器能比它表面看起来做更多的事情--定时能定期地触发一个函数.另一方面,hash则是键值对(key/value)的集合.如果你对hash还不熟悉现在也不要着急--我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接.就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用. .periodical()函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发.和以前的一样

Mootools 1.2教程 选项卡效果(Tabs)

简单的"额外信息"标签(TAB) 鼠标移上去显示内容的TAB 在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容.首先,我们来完成HTML代码--我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项): 参考代码: 复制代码 代码如下: // 这里是我们的菜单 <ul id="tabs"> <li id="one">One</li> <li i

Mootools 1.2教程(2) DOM选择器

如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

Mootools 1.2教程 类(一)

简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能.在一个内容牵涉较多的项目中,类会显得难以置信的有用. 变量 在前面一系列的课程中,我们已经学习过了Hash对象中键值对(key/value pair)的使用方式,因此,下面的这个例子中创建了一个类,它只包含了一些变量,你看起来可能会觉得非常的熟悉: 参考代码: 复制代码 代码如下: // 创建一个名为class_one的类 // 包含两个内部变量 var Class_one = new Class(