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 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
js正则相关知识点专题
May 10 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
vue如何截取字符串
May 06 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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 URL路由类实例
2013/11/12 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP getName()函数讲解
2019/02/03 PHP
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
让python在hadoop上跑起来
2016/01/27 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python中Numpy mat的使用详解
2019/05/24 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2015年读书月活动总结
2015/03/26 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS