MooTools - Stil Özellikleri
MooTools, DOM öğeleri için stil özellik değerlerini ayarlamak ve almak için bazı Özel yöntemler sağlar. Genişlik, yükseklik, arka plan rengi, yazı tipi ağırlığı, yazı tipi rengi, kenarlık gibi farklı stil özellikleri kullanıyoruz. Bu stil özelliklerine farklı değerler ayarlayarak ve bunlara farklı değerler alarak, HTML elemanlarını farklı stillerde sunabiliriz.
Stil Özelliklerini Ayarlama ve Alma
MooTools kitaplığı, belirli bir stil özelliğinin veya çoklu stil özelliklerinin değerini ayarlamak veya almak için kullanılan farklı yöntemler içerir.
setStyle ()
Bu yöntem, DOM öğesinin tek bir özelliği için değer ayarlamanıza olanak tanır. Bu yöntem, belirli bir DOM öğesinin seçici nesnesi üzerinde çalışacaktır. Div öğesi için arka plan rengi sağlayan bir örnek alalım. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
getStyle ()
getStyle () yöntemi, bir öğenin stil özelliğinin değerini almaktır. Body_wrap adlı bir div öğesinin arka plan rengini alan bir örnek alalım. Aşağıdaki söz dizimine bir göz atın.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Çoklu Stil Özellikleri
MooTools kitaplığı, belirli bir stil özelliğinin veya çoklu stil özelliklerinin değerini ayarlamak veya almak için kullanılan farklı yöntemler içerir.
setStyle ()
Tek bir öğede veya bir öğe dizisi üzerinde birden çok stil özelliği ayarlamak istiyorsanız, setStyle () yöntemini kullanmanız gerekir. SetStyle () yönteminin aşağıdaki sözdizimine bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Web sayfasında bu düğmeleri deneyin, div boyutuyla farkı görebilirsiniz.