MooTools - 样式属性

MooTools提供了一些特殊方法来设置和获取DOM元素的样式属性值.我们使用不同的样式属性,如宽度,高度,背景颜色,字体粗细,字体颜色,边框等.通过设置和获取这些样式属性的不同值,我们可以呈现不同样式的HTML元素.

设置和获取样式属性

MooTools库包含不同的方法,用于设置或获取特定样式属性或多个样式属性的值.

setStyle()

此方法允许您设置DOM元素的单个属性的值.此方法将适用于特定DOM元素的选择器对象.让我们举一个为div元素提供背景颜色的例子.请看下面的代码.

示例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            $('body_wrap').setStyle('background-color', '#6B8E23');
            $$('.class_name').setStyle('background-color', '#FAEBD7');
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">A</div>
      <div class = "class_name">B</div>
      <div class = "class_name">C</div>
      <div class = "class_name">D</div>
      <div class = "class_name">E</div>
   </body>
   
</html>

getStyle()

getStyle()方法用于检索元素的样式属性的值。 让我们以一个示例为例,该示例检索名为body_wrap的div的背景色。 看一下以下语法。

Syntax

//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');

Multiple Style Properties

MooTools库包含用于设置或获取特定样式属性或多个样式属性的值的不同方法。

setStyle()

如果要在单个元素或元素数组上设置多个样式属性,则必须使用setStyle()方法。 看一下setStyle()方法的以下语法。

Syntax

$('<element-id>').setStyles({
   //use different style properties such as width, height, background-color, etc.
});

示例

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 200px;
            height: 200px;
            background-color: #eeeeee;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var setWidth = function(){
            $('body_div').setStyles({
               'width': 100
            });
         }
         var setHeight = function(){
            $('body_div').setStyles({
               'height': 100
            });
         }
         var reset = function(){
            $('body_div').setStyles({
               'width': 200,
               'height': 200
            });
         }
         
         window.addEvent('domready', function() {
            $('set_width').addEvent('click', setWidth);
            $('set_height').addEvent('click', setHeight);
            $('reset').addEvent('click', reset);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "set_width" value = "Set Width to 100 px"/>
      <input type = "button" id = "set_height" value = "Set Height to 100 px"/>
      <input type = "button" id = "reset" value = "Reset"/>
   </body>
   
</html>


在网页上尝试这些按钮,你可以看到div大小的差异.