Mootools 1.2 튜토리얼 설정 및 스타일 시트 속성 가져오기

이 시리즈의 일곱 번째 튜토리얼에 오신 것을 환영합니다. 오늘은 MooTools 1.2로 스타일을 조작하는 방법과 이전 강의에서 배운 내용을 살펴보고 이를 통해 UI를 다양하게 제어할 수 있습니다. 스타일을 사용하여 작업하는 것은 매우 쉽지만 오늘은 몇 가지 사항을 조정해 보겠습니다. 예를 들어 키-값 쌍 개체를 소개하겠습니다. 함수에 대한 강의에서 배운 것처럼 domready 외부에서 변수를 전달하는 방법도 다룰 것입니다. 이제부터는 천천히 난이도를 높이고 필요한 프로그래밍 개념을 몇 가지 소개하겠습니다. JavaScript를 처음 접하거나 MooTools를 처음 배우는 경우 이전 튜토리얼을 이해했는지 확인하고 궁금한 점이 있으면 언제든지 문의하세요.
기본 메소드
.setStyle()
이 함수를 사용하면 요소의 스타일 속성을 설정할 수 있습니다. 우리는 이전의 몇몇 예에서 이것을 이미 사용했습니다. 당신이 해야 할 일은 선택기 뒤에 그것을 놓는 것뿐입니다. 그러면 요소의 스타일 속성이 변경됩니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 정의 원하는 컨테이너
//.setStyle 메소드 추가
//스타일 속성 및 값 지정
$('body_wrap').setStyle('Background-color', '#eeeeee') 
$ $( '.class_name').setStyle('ground-color', '#eeeeee') 

참조 코드:

복사 코드 코드는 다음과 같습니다.

< /div>

.getStyle()
이 메서드도 말 그대로 작동합니다. .getStyle(); 요소의 속성 값을 반환합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 먼저 , 이 스타일 속성 값을 저장할 변수를 생성합니다. 
var styleValue = $('body_wrap').getStyle('Background-color') 

위 예제에서 이 코드를 실행하면 , 그러면 변수 styleValue에 "#eeeeee"가 반환됩니다.
여러 스타일 시트 속성 설정 및 가져오기
.setStyles();
.setStyles(); 상상할 수 있듯이 한 요소 또는 요소 배열에 여러 속성을 한 번에 설정할 수 있습니다. . 여러 스타일 시트 속성 값을 동시에 설정할 수 있도록 .setStyles() 구문이 약간 다릅니다.
참조 코드:
// 선택기로 시작한 다음 .setStyles({

코드 복사를 추가하세요. 코드는 다음과 같습니다.

$('body_wrap').setStyles({ 
// 다음 형식은 'property': 'value', 
'width' 입니다. '1000px', 
'height': '1000px', 
// 특별 참고 사항: 마지막 속성에는 쉼표가 없습니다 
// 쉼표가 있는 경우 여러 브라우저에서 작동하지 않습니다 
' background-color ': '#eeeeee' 
}); 

참고: 실제로 속성 선택기에는 커넥터 "-"가 없는 한 작은따옴표가 필요하지 않습니다. ""배경색"과 같은 속성 이름을 단순하게 유지하려면 각 속성 선택자 주위에 작은따옴표를 두는 것이 더 쉽습니다.
또한 참고: 속성 값은 더 유연할 수 있습니다(예: "100px" 또는 "#eeeeee ") 문자열(단지 문자로 구성된 문자열, 향후 튜토리얼에서 이에 대해 더 자세히 다룰 것임) 외에도 숫자(대부분의 경우 px로 해석됨)나 변수를 전달할 수도 있습니다. 대신 따옴표가 필요하지 않습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 변수 firstBackgroundColor의 값을 문자열(STRING) '#eeeeee'로 설정합니다. 
var firstBackgroundColor = '#eeeeee' 
// 하나의 변수를 다른 변수에 전달할 수 있습니다. 
 // 이는 변수 backgroundColor의 값을 문자열(문자열) '#eeeeee'와 동일하게 만듭니다. 
var backgroundColor = firstBackgroundColor 
// 변수 divWidth의 값을 숫자(NUMBER)로 설정합니다. ) 500 
var divWidth = 500; 
$('body_wrap').setStyles({ 
// 이 경우 변수 이름을 따옴표로 묶을 필요가 없습니다. 
'width': divWidth, 
// 숫자도 마찬가지입니다. 따옴표로 묶을 필요가 없습니다. 
'height': 1000, 
// 또 다른 변수 
'ground-color': backgroundColor, 
 // 문자열이 사용됩니다. 작은따옴표로 묶인 일련의 문자로 구성된 문자열 
'color': 'black' 
}) 

.getStyles()
이 방법을 사용하면 여러 스타일 속성을 얻을 수 있습니다. 이는 여러 데이터 세트를 포함하고 각 데이터 세트에는 키(키, 속성 이름)와 값(값, 속성 값)이 있기 때문에 위에서 본 것과 약간 다릅니다. 이 데이터 세트를 객체라고 하며, .getStyles() 메소드를 사용하면 이러한 객체에 여러 속성 값을 쉽게 입력하고 다시 가져올 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 먼저 객체에 대한 변수 정의 
// 그런 다음 선택기를 생성합니다 
// 선택기에 .getStyles를 추가합니다 
// 그런 다음 쉼표로 구분된 스타일 속성 목록을 생성합니다 
/ / 각 속성을 확인합니다 작은따옴표로 묶여 있습니다. 
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'ground-color') 
// 먼저 이 속성 값을 저장하기 위해 객체를 생성합니다. 
// 그런 다음 지정된 속성의 이름(키)으로 값을 얻습니다.
// 두 개의 대괄호 사이에 속성 이름을 입력합니다. []
// 속성 이름이 단일 문자로 묶여 있는지 확인합니다. quote 
var bgStyle = bodyStyles['Background-color']; 

CSS 파일에 이 스타일 정의가 있는 경우:
참조 코드:

코드 복사 코드는 다음과 같습니다.

#body_wrap { 
너비: 1000px 
높이: 1000px; 
 background-color: #eeeeee; 
} 

그러면 bgStyle 변수에 "#eeeeee" 값이 포함됩니다.
참고: 스타일시트 개체에서 개별 속성을 가져오려면 먼저 개체 변수(이 경우 "bodyStyles")를 가져온 다음 대괄호와 작은따옴표([''])를 사용하고 마지막으로 내용을 입력하세요. 속성 이름 키(예: 너비 또는 배경색) 그것은 간단합니다!
코드 예
이 예에서는 위에서 배운 몇 가지 방법을 사용하여 스타일을 가져오고 설정합니다. 스타일 속성 작업의 사용법에 주의하는 동시에 자체 구조에도 특별한 주의를 기울여야 합니다. 함수를 domready와 분리하려면 해당 변수를 domready 이벤트 함수에 전달해야 합니다. domready의 함수에 매개변수를 전달하여 이를 수행합니다. click 이벤트는 익명 메서드를 사용합니다. 이를 통해 domready 이벤트에서 외부 함수로 변수를 전달할 수 있습니다. 처음에 이해가 안 되더라도 걱정하지 마세요. 다음 예를 보면 더 명확해질 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 다음은 몇 가지 함수입니다. 
// 이 함수에는 하나의 매개변수인 "bgColor"가 있습니다. 
// 이는 domready 이벤트에서 전달됩니다. 
var seeBgColor = function(bgColor ) { 
alert(bgColor); 
} 
var seeBorderColor = function(borderColor) { 
alert(borderColor) 
} 
// 이 함수에 playDiv를 전달합니다. 이 요소를 조작하려면 
// 또한 선택기를 반복적으로 사용하지 않아도 됩니다 
// 이는 복잡한 선택기를 처리할 때 유용합니다 
var seeDivWidth = function(playDiv) { 
// 시작합니다 스타일 속성을 다시 가져옵니다 
// domready에서 사용한 getStyles와 별도로 
// 현재 값을 사용하고 싶기 때문입니다 
// 이렇게 하면 너비가 정확하게 유지됩니다 
/ / 그랬더라도 domready 이벤트 이후에 변경됨 
var currentDivWidth = playDiv.getStyle('width'); 
alert(currentDivWidth); 
} 
var seeDivHeight = function(playDiv) { 
var currentDivHeight = playDiv .getStyle('height'); 
alert(currentDivHeight); 
} 
var setDivWidth = function(playDiv) { 
playDiv.setStyle('width', '50px' ); } 
var setDivHeight = function(playDiv) { 
playDiv.setStyle('height', '50px'); 
} 
// 이때 이 변수는 어떤 이름이든 사용할 수 있습니다. 
// 모든 값, 값, 요소 또는 사용자의 모든 항목을 전달합니다.
// domready에 전달된 모든 항목을 대체합니다.
var ResetSIze = function(foo) { 
foo.setStyles({ 
'height': 200, 
'width': 200 
}); 
} 
window.addEvent('domready', function() { 
// 이 선택기를 여러 번 사용하면 이를 변수에 할당합니다. 
var playDiv = $('playstyles'); 
// 여기서는 여러 속성을 포함하는 변수를 만듭니다. 
var bodyStyles = playDiv. getStyles(' background-color', 'border-bottom-color') 
// 속성 이름을 호출하여 스타일 값을 가져온 다음 변수에 전달할 수 있습니다. 
var bgColor = bodyStyles['Background -color'];// 여기서는 domready 외부의 함수에 매개변수를 전달할 수 있도록 익명 함수를 사용합니다. 
$('bgcolor').addEvent(' click', function(){ 
 seeBgColor(bgColor); 
}); 
$('border_color').addEvent('click', function(){ 
// 스타일 속성을 추가하는 것 외에도 
// 여기서 직접 호출할 수도 있습니다 
seeBorderColor(bodyStyles['border-bottom-color']) 
}) 
$('div_width') .addEvent('click', function (){ 
seeDivWidth(playDiv); 
}) 
$('div_height').addEvent('click', function(){ 
seeDivHeight( playDiv); 
}) ; 
$('set_width').addEvent('click', function(){ 
setDivWidth(playDiv); 
}) 
$('set_height').addEvent('click' , function(){ 
setDivHeight(playDiv); 
}) 
$('reset').addEvent('click', function(){ 
 ResetSIze(playDiv); 
 }); 
}); 


HTML 코드는 다음과 같습니다. 

참조 코드:

코드 복사 코드는 다음과 같습니다.

버튼 id="bgcolor">배경 색상 보기

< ;br /> ;

< ;br /> ;

;br />

CSS 코드는 다음과 같습니다
참조 코드:

코드 복사

코드는 다음과 같습니다.#playstyles { 너비: 200px

높이: 200px

배경 색상: #eeeeee 
테두리: 3px 단색 #dd97a1 
} 

자세히 알아보기...

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

MooTools 1.2 핵심 라이브러리, 외부 JavaScript 파일, 간단한 HTML 페이지 및 CSS 파일이 포함되어 있습니다.

스타일 시트에 대해 자세히 알아보기

스타일 시트에 대해 자세히 알아보려면 MooTools 문서의

Element.Style

섹션을 확인하세요.

Mootools 1.2 튜토리얼 설정 및 스타일 시트 속성 가져오기_Mootools