MooTools-스타일 속성

MooTools는 DOM 요소에 대한 스타일 속성 값을 설정하고 가져 오는 몇 가지 특수 메서드를 제공합니다. 너비, 높이, 배경색, 글꼴 두께, 글꼴 색상, 테두리 등과 같은 다른 스타일 속성을 사용합니다. 이러한 스타일 속성에 다른 값을 설정하고 가져옴으로써 HTML 요소를 다른 스타일로 표현할 수 있습니다.

스타일 속성 설정 및 가져 오기

MooTools 라이브러리에는 특정 스타일 속성 또는 여러 스타일 속성의 값을 설정하거나 가져 오는 데 사용되는 다양한 메서드가 포함되어 있습니다.

setStyle ()

이 메서드를 사용하면 DOM 요소의 단일 속성에 대한 값을 설정할 수 있습니다. 이 메소드는 특정 DOM 요소의 선택기 객체에서 작동합니다. div 요소에 배경색을 제공하는 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.

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>

다음과 같은 출력을 받게됩니다.

Output

getStyle ()

getStyle () 메서드는 요소의 스타일 속성 값을 검색하는 것입니다. body_wrap이라는 div의 배경색을 검색하는 예제를 살펴 보겠습니다. 다음 구문을 살펴보십시오.

Syntax

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

여러 스타일 속성

MooTools 라이브러리에는 특정 스타일 속성 또는 여러 스타일 속성의 값을 설정하거나 가져 오는 데 사용되는 다양한 메서드가 포함되어 있습니다.

setStyle ()

단일 요소 또는 요소 배열에 여러 스타일 속성을 설정하려면 setStyle () 메서드를 사용해야합니다. 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>

다음과 같은 출력을 받게됩니다.

Output

웹 페이지에서이 버튼을 시도하면 div 크기의 차이를 확인할 수 있습니다.