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 크기의 차이를 확인할 수 있습니다.