发布于 2016-12-14 03:44:14 | 102 次阅读 | 评论: 0 | 来源: 网友投递
MooTools JavaScript WEB应用框架
MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。
它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。
它提供了一个比普通js更面向对象的documentAPI。
// 定义你的选择器
// 添加.setStyle方法
// 指定样式属性和值
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
<div id="body_wrap">
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
</div>
// 首先，建立一个变量来保存这个样式属性值
var styleValue = $('body_wrap').getStyle('background-color');
$('body_wrap').setStyles({
// 下面的格式为：'property': 'value',
'width': '1000px',
'height': '1000px',
// 特别注意：最后一个属性没有逗号
// 如果有逗号，将不能跨浏览器
'background-color': '#eeeeee'
});
// 这个把变量firstBackgroundColor的值设置为字符串（STRING）'#eeeeee'
var firstBackgroundColor = '#eeeeee';
// 你可以把一个变量传递给另外一个变量
// 这使得变量backgroundColor的值也等于字符串（string）'#eeeeee'
var backgroundColor = firstBackgroundColor;
// 这个把变量divWidth的值设置为数字（NUMBER）500
var divWidth = 500;
$('body_wrap').setStyles({
// 在这种情况下，变量名是不需要用引号包围起来的
'width': divWidth,
// 数字也一样，不需要引号包围
'height': 1000,
// 另外一个变量
'background-color': backgroundColor,
// 字符串就是用单引号引起来的一系列字符组成的串
'color': 'black'
});
// 首先为你的对象定义一个变量
// 然后创建一个选择器
// 然后把.getStyles添加到你的选择器
// 然后创建一个用逗号分隔开的样式属性列表
// 确保每个属性都在一个单引号中
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
// 首先我们创建一个对象来保存这个属性值
// 然后我们通过指定的属性的名（键）来得到一个值
// 把属性名放在两个方括号[]之间
// 并确保属性名已经用单引号引起来了
var bgStyle = bodyStyles['background-color'];
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}
// 这里是一些函数
// 注意这个函数有一个参数："bgColor"
// 这个是从domready事件中传递过来的
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
// 我们把playDiv传递给这个函数，从而可以操作这个元素
// 也可以让我们避免重复地使用选择器
// 在处理复杂的选择器时很有用
var seeDivWidth = function(playDiv) {
// 我们再次开始获得样式属性
// 和我们在domready中用的getStyles独立开来
// 因为我们想使用当前的值
// 这可以保持width是准确的
// 即使它在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');
}
// 注意，在这个时候，这个变量可以取任何名称
// 它会传递任何值，value或者element或者你的任何东西
// 它将会取代任何在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);
});
});
<div id="playstyles"> </div>
<br />
<button id="bgcolor">See background-color</button>
<button id="border_color">See border-bottom-color</button><br /><br />
<button id="div_width">See width</button>
<button id="div_height">See height</button><br /><br />
<button id="set_width">Set weight to 50px</button>
<button id="set_height">Set height to 50px</button><br /><br />
<button id="reset">Reset size</button>
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
包含MooTools 1.2核心库，一个外部JavaScript文件，一个简单的HTML页面和一个CSS文件。
更多关于样式表的内容
要学习更多关于样式表的内容，请查阅MooTools文档中的Element.Style部分。