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 的背景颜色为例。查看以下语法。

语法

//首先，设置变量以保存样式值
var styleValue = $('body_wrap').getStyle('background-color');

多个样式属性

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

setStyle()

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

语法

$('<element-id>').setStyles({
    //使用不同的样式属性，如宽度、高度、背景颜色等。
});

示例

<!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 大小的区别。