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


Posted in Javascript onSeptember 15, 2009

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

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
JavaScript类库D
Oct 24 Javascript
js Calender控件使用详解
Jan 05 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 #Javascript
Mootools 1.2教程 事件处理
Sep 15 #Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
You might like
php类的扩展和继承用法实例
2015/06/20 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python查询IP地址归属完整代码
2017/06/21 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
linux 下selenium chrome使用详解
2020/04/02 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
新学期红领巾广播稿
2014/01/14 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
合理化建议书范文
2015/09/14 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python