MooTools - 样式属性

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

设置和获取样式属性

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

设置样式()

此方法允许您设置 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() 方法用于检索元素的样式属性的值。让我们举一个检索名为 body_wrap 的 div 的背景颜色的示例。看看下面的语法。

句法

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

多种样式属性

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

设置样式()

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

句法

$('<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 大小的差异。