Mootools 1.2教程(7)——设置和获取样式表属性
作者:Fdream 来源:Fdream博客 发布时间:2008-11-25 13:48:00
原文地址:30 Days of Mootools 1.2 Tutorials - Day 7 - Set and Get Style Properties
设置和获取样式表属性
上一讲:Mootools 1.2教程(6)——操纵HTML DOM元素
欢迎开始这一系列的教程的第七讲。今天,我们来看一下如何通过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)。就这么简单!
猜你喜欢
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们可以通过export with rows=no来得到,但它的输出因为格式
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 用IIS调试ASP程序时,有的页面可以显示出错行及出错原因,虽然原因不是很具体但足以引导调试程序,但有些时候就直接出现:HTTP 500 -
- 问:SQL Server应该怎样访问Sybase数据库的表?答:具体方法如下:1: 安装Sybase客户端版本的要求:Sybase Clie
- rhel5下默认安装mysql5.0后,中文显示为乱码原因:mysql默认字符集是latin,所以中文不能正常显示解决方法:修改配置文件,
- 没有使用动态语句直接报错 错误的 代码如下:alter proc testpapers as begin declare @tems nva
- 这个验证类的完成有很长时间了,一直没有分享给大家使用了这么长时间之后感觉挺顺手,用于一些不需要特殊效果的表单验证个人认为已经足够了,还是挺好
- 大家好,我叫斑马纹列表中使用两种相同的样式但颜色不同的背景,来间隔显示的内容。当然这个释义我是借鉴《designing interfaces
- 有时候要通过asp代码在数据库中创建表和列,下面的就是这些操作的函数。1.检测表是否存在tbName 检测的表的名称dbTp 数据库的类型1
- 昨天有位同事说,他的网页查询过程中发现普通索引和唯一索引的效率是有差别的,普通索引比唯一索引快,今天在我的虚拟机中布置了环境,测试抓图如下:
- 用ASP编写虚拟社区、网上购物等程序时,Application和Session对象具有举足轻重的作用,能够灵活合理地运用这两个对
- Sun公司和Zmanda在3月18号声称他们正在一起合作,为MySQL Enterprise用户交付一种全面、全局数据备份与恢复解决方案。现
- 有两个服务器,装了两个数据库,一个是主的,一个是备用的,下面的的功能就将主数据库的数据库,实时同步到备份数据库上,使他们的数据内容,基本上保
- 这个例子可作为一个模式,在你需要的时候套用。<!DOCTYPE HTML PUBLIC &q
- 联合结果集 新建临时工数据表 代码如下:CREATE TABLE T_TempEmployee (FIdCardNumber VARCHAR
- 在 Facebook 上有一个彩蛋:登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down,
- 在用到编辑器时,就会碰到一点,那就是标签的闭合问题,这个问题非常严峻,因为这可能会导致网页显示的整体样式受到破坏。这最近在PJ的functi
- 大家都知道对于一个页面来说,最基本的结构呢就是<html> <head> <!-- 头部信息内容区域
- 下面是用SA-FileUp组件上传一个HTML文件的程序:fileup.htm < HTM
- [root@vm1 ~]# rpm -ivh groundwork-foundation-pro-1.6.1-67.noarch.rpm P