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の背景色を取得する例を見てみましょう。次の構文を見てください。

構文

//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>

次の出力が表示されます-

出力

Webページでこれらのボタンを試してください。divサイズとの違いを確認できます。

Mootools-style-properties

MooTools-スタイルのプロパティ

スタイルプロパティの設定と取得

setStyle（）

getStyle（）

複数のスタイルプロパティ

setStyle（）

目次