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 的 background-color 的示例。請看以下語法。

語法

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

多個樣式屬性

MooTools 庫包含不同的方法，用於設定或獲取特定樣式屬性或多個樣式屬性的值。

setStyle()

如果要在單個元素或元素陣列上設定多個樣式屬性，則必須使用 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 大小的變化。

列印頁面