对 CSS 的操作
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
使用 jQuery,可以很方便的对 CSS 类进行添加/删除/toggle 等操作,我们来看一个简单 的示例: 首先定义三个 CSS 类:base,red-region,yellow-region:
.base{
background:white;
border:1px solid black;
width:200px;
height:200px;
}
.red-region{ background:red;
border:1px solid blue;
width:200px;
height:200px;
}
.yellow-region{
background:yellow;
border:1px solid green;
width:200px;
height:200px;
}
定义一个 ID 为 base 的面板,两个按钮:red 和 yellow。当点击 red 时,判断 base 是否已经被 yellow 修饰过,如果已经被修饰过,则移除 CSS 类 yellow-region。点击 yellow 时情形类似:
var base = $("div#base");
$("input#red").click(function(){
if(base.hasClass("yellow-region")){
base.removeClass("yellow-region");
}
$("div#base").addClass("red-region");
});
$("input#yellow").click(function(){
if(base.hasClass("red-region")){
base.removeClass("red-region");
}
$("div#base").addClass("yellow-region");
});
页面效果如下:
点击 red 按钮之后,base 添加了 red-region 的 CSS 类,变为红色:
在使用 jQuery 选择器选择到预期的元素集之后,我们可以修改器 CSS,来完成页面的动态化。动态修改 CSS 非常简单:
var base = $("div#base");
base.css('width', '300px');
base.css({
'width' : '300px',
'height' : '300px',
'background' : 'green'
});
使用 css 函数,可以进行一个值的修改,同样可以传入一个集合,整体进行修改。
在线练习
{$ activeFileHint $}