快速业务通道

MooTools教程(7):设置和获取样式表属性

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-07

欢迎开始这一系列的教程的第七讲。今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权。处理样式非常简单,不过今天我们要做一些调整。例如,我们要介绍键值对(key-value pair)对象。我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样。从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念。如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以随意地问我任何问题。

基本方法

.setStyle();

这个函数可以允许你设置一个元素的样式属性。我们在前面的一些例子中已经使用过了。你要做的就是把它放在你的 选择器之后,那么它将改变一个元素或者多个元素的样式属性。

参考代码: [复制代码] [保存代码]
  1. // 定义你的选择器
  2. // 添加.setStyle方法
  3. // 指定样式属性和值
  4. $(''body_wrap'').setStyle(''background-color''''#eeeeee'');
  5. $(''.class_name'').setStyle(''background-color''''#eeeeee'');
参考代码: [复制代码] [保存代码]
  1. <div id="body_wrap">
  2.     <div class="class_name"></div>
  3.     <div class="class_name"></div>
  4.     <div class="class_name"></div>
  5.     <div class="class_name"></div>
  6. </div>

.getStyle();

同样,这个方法就像它的字面意思一样。.getStyle();将返回一个元素的一个属性值。

参考代码: [复制代码] [保存代码]
  1. // 首先,建立一个变量来保存这个样式属性值
  2. var styleValue = $(''body_wrap'').getStyle(''background-color'');

如果我们在上面的例子中运行这个代码,那么它将返回“#eeeeee”给变量styleValue。

设置和获取多个样式表属性

.setStyles();

.setStyles();就像你所想象的那样,可以让你一次给一个元素或者一个元素数组设置多个属性值。为了能够同时设置多个样式表属性值,.setStyles();的语法略有一点不同。

参考代码: [复制代码] [保存代码]
  1. // 还是从你的选择器开始,然后在后面加上.setStyles({
  2. $(''body_wrap'').setStyles({
  3.     // 下面的格式为:''property'': ''value'',
  4.     ''width''''1000px'',
  5.     ''height''''1000px'',
  6.     // 特别注意:最后一个属性没有逗号 
  7.     // 如果有逗号,将不能跨浏览器
  8.     ''background-color''''#eeeeee''
  9. });

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号