MooTools - Propriedades de estilo

MooTools fornece alguns métodos especiais para definir e obter valores de propriedade de estilo para elementos DOM. Usamos diferentes propriedades de estilo, como largura, altura, cor de fundo, espessura da fonte, cor da fonte, borda, etc. Ao definir e obter valores diferentes para essas propriedades de estilo, podemos apresentar elementos HTML em estilos diferentes.

Definir e obter propriedades de estilo

A biblioteca MooTools contém métodos diferentes que são usados para definir ou obter o valor de uma propriedade de estilo particular ou propriedades de estilo múltiplas.

setStyle ()

Este método permite que você defina o valor para uma única propriedade do elemento DOM. Este método funcionará no objeto seletor de um elemento DOM específico. Vejamos um exemplo que fornece a cor de fundo para o elemento div. Dê uma olhada no código a seguir.

Example

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

Você receberá a seguinte saída -

Output

getStyle ()

O método getStyle () é recuperar o valor de uma propriedade de estilo de um elemento. Tomemos um exemplo que recupera a cor de fundo de um div denominado body_wrap. Dê uma olhada na seguinte sintaxe.

Syntax

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

Propriedades de vários estilos

A biblioteca MooTools contém diferentes métodos usados para definir ou obter o valor de uma propriedade de estilo particular ou propriedades de estilo múltiplas.

setStyle ()

Se você deseja definir várias propriedades de estilo em um único elemento ou uma matriz de elementos, você deve usar o método setStyle (). Dê uma olhada na seguinte sintaxe do método setStyle ().

Syntax

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

Example

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

Você receberá a seguinte saída -

Output

Experimente estes botões na página da web, você pode ver a diferença com o tamanho do div.