MooTools - 样式属性
MooTools 提供了一些特殊方法来设置和获取 DOM 元素的样式属性值。我们使用不同的样式属性，例如宽度、高度、背景颜色、字体粗细、字体颜色、边框等。通过设置和获取这些样式属性的不同值，我们可以以不同的样式呈现 HTML 元素。
设置和获取样式属性
MooTools 库包含不同的方法，用于设置或获取特定样式属性或多个样式属性的值。
setStyle()
此方法允许您设置 DOM 元素的单个属性的值。此方法将作用于特定 DOM 元素的选择器对象。让我们举一个为 div 元素提供背景颜色的示例。请看以下代码。
示例
<!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>
您将收到以下输出 −
输出
getStyle()
getStyle() 方法用于检索元素的样式属性值。我们以检索名为 body_wrap 的 div 的背景颜色为例。查看以下语法。
语法
//首先，设置变量以保存样式值
var styleValue = $('body_wrap').getStyle('background-color');
多个样式属性
MooTools 库包含用于设置或获取特定样式属性或多个样式属性值的不同方法。
setStyle()
如果您想在单个元素或元素数组上设置多个样式属性，则必须使用 setStyle() 方法。查看 setStyle() 方法的以下语法。
语法
$('<element-id>').setStyles({
//使用不同的样式属性，如宽度、高度、背景颜色等。
});
示例
<!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>
您将收到以下输出 −
输出
在网页上尝试一下这些按钮，你可以看到与 div 大小的区别。
