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部分。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3