MooTools教程(7):设置和获取样式表属性

作者佚名技术来源网页制作浏览发布时间 2012-03-07

如果在我们的CSS文件中有这样的样式定义：

参考代码： [复制代码] [保存代码]

#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}

那么变量bgStyle将包含值“#eeeeee”。

注意：如果你要从你的样式表对象中取得一个单独的属性，首先取得一个对象变量（在这个例子中是“bodyStyles”），然后使用方括号和单引号（['''']），最后填入属性名key（如width或者background-color）。就这么简单！

代码示例

在这个例子中，我们将使用我们刚才在上面学到的一些方法来获取和设置样式。在注意样式属性操作用法的同时，也要特别注意它本身的结构。为了把我们的函数从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独立开来
// 因为我们想使用当前的值
// 这可以保持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);
});
});

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 单击按钮复制定义好的内容到剪贴板下一篇: Javascript网页恶意代码

关于MooTools教程(7):设置和获取样式表属性的所有评论

随机推荐