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


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

注意:实际上,属性选择器也可以不需要单引号,除非属性名中有连接符“-”,比如在“background-color”中,为了保持简单,给每个属性选择器都加上单引号更容易一些。

同时也要注意:属性值可能更灵活多变一些(比如“100px”或者“#eeeeee”)。除了字符串(一个只有字母的串,我们会在以后的教程中更深入地讲解这个),你也可以传入数字(这可能在大多数情况下会被解释为px)或者变量而不需要引号:

参考代码: [复制代码] [保存代码]
  1. // 这个把变量firstBackgroundColor的值设置为字符串(STRING)'#eeeeee'
  2. var firstBackgroundColor = '#eeeeee';
  3.  
  4. // 你可以把一个变量传递给另外一个变量 
  5. // 这使得变量backgroundColor的值也等于字符串(string)'#eeeeee'
  6. var backgroundColor = firstBackgroundColor;
  7.  
  8. // 这个把变量divWidth的值设置为数字(NUMBER)500
  9. var divWidth = 500;
  10.  
  11. $('body_wrap').setStyles({
  12.     // 在这种情况下,变量名是不需要用引号包围起来的
  13.     'width': divWidth,
  14.     // 数字也一样,不需要引号包围
  15.     'height'1000,
  16.     // 另外一个变量
  17.     'background-color': backgroundColor,
  18.     // 字符串就是用单引号引起来的一系列字符组成的串
  19.     'color''black'
  20. });

.getStyles();

这个方法可以让你一次获得多个样式属性。这个和我们看到的上面的略有一些不同,因为它包含了多个数据集,每个数据集有一个键(key,属性名)和一个值(value,属性值)。这个数据集叫做对象,.getStyles();方法可以非常容易地把多个属性值放入这些对象中,并可以很简单地把它们取回来。

参考代码: [复制代码] [保存代码]
  1. // 首先为你的对象定义一个变量
  2. // 然后创建一个选择器
  3. // 然后把.getStyles添加到你的选择器
  4. // 然后创建一个用逗号分隔开的样式属性列表 
  5. // 确保每个属性都在一个单引号中
  6. var bodyStyles = $('body_wrap').getStyles('width''height''background-color'); 
  7.  
  8. // 首先我们创建一个对象来保存这个属性值
  9. // 然后我们通过指定的属性的名(键)来得到一个值
  10. // 把属性名放在两个方括号[]之间
  11. // 并确保属性名已经用单引号引起来了
  12. var bgStyle = bodyStyles['background-color'];

如果在我们的CSS文件中有这样的样式定义:

参考代码: [复制代码] [保存代码]
  1. #body_wrap {
  2.     width1000px;
  3.     height1000px;
  4.     background-color: #eeeeee;
  5. }

那么变量bgStyle将包含值“#eeeeee”。

注意:如果你要从你的样式表对象中取得一个单独的属性,首先取得一个对象变量(在这个例子中是“bodyStyles”),然后使用方括号和单引号(['']),最后填入属性名key(如width或者background-color)。就这么简单!

代码示例

在这个例子中,我们将使用我们刚才在上面学到的一些方法来获取和设置样式。在注意样式属性操作用法的同时,也要特别注意它本身的结构。为了把我们的函数从domready中独立出来,我们需要把那些变量传递到domready事件的函数中。我们通过给domready里面的函数传递一个参数来实现这个。注意点击(click)事件使用了匿名方法——这可以让我们从domready事件中把变量传递到外面的函数中。如果你第一遍没有看懂,请不要着急,下面的例子可能会让这些更清楚更明白一些:

参考代码: [复制代码] [保存代码]
  1. // 这里是一些函数
  2.  
  3. // 注意这个函数有一个参数:"bgColor"
  4. // 这个是从domready事件中传递过来的
  5. var seeBgColor = function(bgColor) { 
  6.     alert(bgColor);
  7. }
  8.  
  9. var seeBorderColor = function(borderColor) {
  10.     alert(borderColor);
  11. }
  12.  
  13. // 我们把playDiv传递给这个函数,从而可以操作这个元素
  14. // 也可以让我们避免重复地使用选择器
  15. // 在处理复杂的选择器时很有用
  16. var seeDivWidth = function(playDiv) {
  17.     // 我们再次开始获得样式属性
  18.     // 和我们在domready中用的getStyles独立开来
  19.     // 因为我们想使用当前的值
  20.     // 这可以保持width是准确的
  21.     // 即使它在domready事件之后被改变了
  22.     var currentDivWidth = playDiv.getStyle('width');
  23.     alert(currentDivWidth);
  24. }
  25.  
  26. var seeDivHeight = function(playDiv) {
  27.     var currentDivHeight = playDiv.getStyle('height');
  28.     alert(currentDivHeight);
  29. }
  30.  
  31. var setDivWidth = function(playDiv) {
  32.     playDiv.setStyle('width''50px'); 
  33. }
  34.  
  35. var setDivHeight = function(playDiv) {
  36.     playDiv.setStyle('height''50px');
  37. }
  38.  
  39. // 注意,在这个时候,这个变量可以取任何名称
  40. // 它会传递任何值,value或者element或者你的任何东西
  41. // 它将会取代任何在domready里面传过来的东西
  42. var resetSIze = function(foo) {
  43.     foo.setStyles({
  44.         'height'200,
  45.         'width'200
  46.     });
  47. }
  48.  
  49. window.addEvent('domready'function() {
  50.     // 因为我们要多次使用这个选择器,所以我们把它赋值给一个变量
  51.     var playDiv = $('playstyles');
  52.  
  53.     // 这里我们创建了一个包含几个属性的对象
  54.     var bodyStyles = playDiv.getStyles('background-color''border-bottom-color'); 
  55.  
  56.     // 你可以通过调用属性名来获得样式值然后传递给一个变量
  57.  
  58.     var bgColor = bodyStyles['background-color']; 
  59.  
  60.     // 这里我们使用了一个匿名函数,从而我们可以把参数传递给domready外面的函数 
  61.     $('bgcolor').addEvent('click'function(){
  62.         seeBgColor(bgColor);
  63.     });
  64.  
  65.     $('border_color').addEvent('click'function(){
  66.         // 除了可以把一个样式属性传递给一个变量 
  67.         // 你还可以在这里直接调用
  68.         seeBorderColor(bodyStyles['border-bottom-color']);
  69.     });
  70.  
  71.     $('div_width').addEvent('click'function(){
  72.         seeDivWidth(playDiv);
  73.     });
  74.  
  75.     $('div_height').addEvent('click'function(){
  76.         seeDivHeight(playDiv);
  77.     });
  78.  
  79.     $('set_width').addEvent('click'function(){
  80.         setDivWidth(playDiv);
  81.     });
  82.  
  83.     $('set_height').addEvent('click'function(){
  84.         setDivHeight(playDiv);
  85.     }); 
  86.  
  87.     $('reset').addEvent('click'function(){
  88.         resetSIze(playDiv);
  89.     });
  90. });

这里是HTML代码:

参考代码: [复制代码] [保存代码]
  1. <div id="playstyles"> </div>
  2.     <br />
  3.     <button id="bgcolor">See background-color</button>
  4.     <button id="border_color">See border-bottom-color</button><br /><br />
  5.     <button id="div_width">See width</button>
  6.     <button id="div_height">See height</button><br /><br />
  7.     <button id="set_width">Set weight to 50px</button>
  8.     <button id="set_height">Set height to 50px</button><br /><br />
  9.     <button id="reset">Reset size</button>

这里是CSS代码

参考代码: [复制代码] [保存代码]
  1. #playstyles {
  2.     width200px
  3.     height200px
  4.     background-color: #eeeeee
  5.     border3px solid #dd97a1
  6. }

 








 

更多学习...

下载一个包含你开始所需要的所用东西的zip包

包含MooTools 1.2核心库,一个外部JavaScript文件,一个简单的HTML页面和一个CSS文件。

更多关于样式表的内容

要学习更多关于样式表的内容,请查阅MooTools文档中的Element.Style部分。



相关阅读:
Discuz! 7.0论坛模板制作更加简单化
SQL2005 服务器因重装改名后出错的说明
甲骨文如何解析语义谜题
在DB2数据库的表中插入和删除数据
SQLServer更改sa用户名的方法
Silverlight融合ajax实现前后台数据交互
Linux 2.6内核中进程隐藏实现办法
用CSS实现表单form布局
php 将字符串按大写字母分隔成字符串数组
SMTP简单邮件传输协议
MySQL字符集:怎样才能保证不发生乱码
使用OPENXML函数将XML文档转换为行结果集
用DOS杀毒的一个不错的应用
JS代码混淆初步
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 G4722 G1875 G215 G569 G421 G6733 G7577 G8906 G1235 G4916 G7291 G1953 G245 G662 G1570 G6285 G719 G1836 G1346 G4781 G4908 G289 G6781 G9290 G7358 G1928 G1815 G325 G132 G4901 G6012 G6290 G7131 G5367 G184 G151 G5303 G1136 G6481 G7028 G575 G1744 G7660 G7693 G2344 G4937 G1234 G1814 G6252 G1492 G253 G2926 G883 G9275 G1231 G556 G241 G1306 G7646 G8103 G600 G1858 G9678 G6160 G7156 G825 G1125 G7249 G1809 G1350 G432 G9466 G7067 G785 G6404 G4663 G7008 G150 G823 G1514 G7529 G1201 G2353 G205 G7629 G9409 G6147 G677 G390 G8016 G9239 G456 G828 G8045 G491 G7145 G397 G7012 G1021 G6482 G2322 G7264 G1301 G9247 G96 G1294 G7133 G4824 G7005 G1653 G5307 G1213 G822 G4837 G1422 G411 G6227 G1571 G359 G1882 G6074 G7678 G21 G7077 G1272 G8918 G9645 G461 G1254 G1846 G8021 G7303 G1104 G76 G82 G621 G218 G8533 G2341 G8543 G555 G8013 G4802 G1364 G1153 G1342 G1861 G8905 G590 G4780 G668 G9261 G1304 G1638 G1395 G2914 G8003 G7158 G1833 G1873 G8128 G1856 G1841 G8709 G7346 G4612 G2103 G835 G8712 G381 G7240 G8932 G507 G29 G4054 G6273 G6752 G426 G211 G9473 G7119 G2333 G1567 G6153 G360 G4011 G5301 G7648 G8010 G8015 G6706 G614 G423 G8557 G9465 G72 G6018 G8901 G7030 G123

丹东 云霄 辽中 德阳 克拉玛依 惠山 招远 昭通 铁岭西 延吉西 军粮城北 定西 晋中 许昌东 郫县 诏安 七台河 高碑店东 南昌 延安 敦化 铜陵北 嵩明 鲘门 扬中 龙里北 舟山 洛阳 运城北 鞍山 西昌 邵阳北 绍兴 白山 三明 肇东 陵水 衡山西 嘉善 宜都 泰兴 泉州 汉口 东胜西 昌图西 锦州南 安阳东 怀化 黄南 亚龙湾 扬州 温州 南翔北 福安 金山北 永川东 安达 曲阜东 郑州西 天门 绍兴北 涪陵北 阳泉北 三亚 葫芦岛北 徐州 阳江 辽源 新泰 阿坝 孝感北 三穗 金寨 保山 高安 安阳 牟平 西双版纳 信阳 繁昌西 哈尔滨北 达州 新余 沈阳南 四平 扶余北 伊宁 郴州西 济源 水家湖 民权北 福鼎 如皋 奉化 全州南 安庆 太姥山 武汉 乐清 皮口 武昌 茂名 邯郸 资阳 马鞍山 三水南 泰安 包头东 衡阳东 南丰 仙桃西 安吉 罗源 山海关 平湖 惠州 资阳北 淄博 丹阳 莱州 巴东 关岭 盐城 锦州 格尔木 益阳 大英东 吉林 湛江 临安 襄汾西 渑池南 当涂东 辽阳 徐水 贺州 韶关 光明城 邯郸东 普安县 南江口 铜川 五龙背东 张家港 烟台南 萍乡北 青堆 长乐 江门 台州 衡水 湘潭北 闽清北 高邑西 盖州西 石柱县 潮汕 肇庆 泰康 邵东 湖州 余姚 平凉 宜宾 增城 沧州 都匀 防城港 鹰潭北 海东西 福田 余姚北 岳池 广州北 南安 蓬莱 瓦房店西 李石寨 葛店南 海安 无锡东 上饶 通辽 四会 桂林西 砀山南 兰州 滨海 龙口 绅坊 莱西 石林西 深圳 大连北 成都 上海西 孝感 杏树屯 德清 嘉兴

Copyright © 2016 phpStudy |