MooTools - Właściwości stylu
MooTools udostępnia specjalne metody ustawiania i pobierania wartości właściwości stylu dla elementów DOM. Używamy różnych właściwości stylu, takich jak szerokość, wysokość, kolor tła, grubość czcionki, kolor czcionki, obramowanie itp. Ustawiając i pobierając różne wartości tych właściwości stylu, możemy prezentować elementy HTML w różnych stylach.
Ustaw i pobierz właściwości stylu
Biblioteka MooTools zawiera różne metody, które służą do ustawiania lub pobierania wartości określonej właściwości stylu lub wielu właściwości stylu.
setStyle ()
Ta metoda pozwala ustawić wartość pojedynczej właściwości elementu DOM. Ta metoda będzie działać na obiekcie selektora określonego elementu DOM. Weźmy przykład, który podaje kolor tła dla elementu div. Spójrz na poniższy kod.
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>Otrzymasz następujący wynik -
Output
getStyle ()
Metoda getStyle () służy do pobierania wartości właściwości style elementu. Weźmy przykład, który pobiera kolor tła elementu div o nazwie body_wrap. Spójrz na następującą składnię.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Wiele właściwości stylu
Biblioteka MooTools zawiera różne metody używane do ustawiania lub pobierania wartości określonej właściwości stylu lub wielu właściwości stylu.
setStyle ()
Jeśli chcesz ustawić wiele właściwości stylu dla pojedynczego elementu lub tablicy elementów, musisz użyć metody setStyle (). Spójrz na następującą składnię metody 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>Otrzymasz następujący wynik -
Output
Wypróbuj te przyciski na stronie internetowej, zobaczysz różnicę w rozmiarze div.