Учебники

MooTools — Стиль Свойства

Сентябрь 8, 2018

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 () предназначен для получения значения свойства стиля элемента. Давайте возьмем пример, который возвращает цвет фона для div с именем body_wrap. Посмотрите на следующий синтаксис.

Синтаксис 

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

43
Share: