应用jquery操作元素样式(一)

来源:互联网 发布:江苏远洋数据 编辑:程序博客网 时间:2024/06/05 06:28
1.如何获取、设置某个元素行内单个、多个css样式
2.如何通过fn来设置元素css样式
3.如何给元素添加单个、多个css类
4.如何删除某个元素的单个、多个css类
5.如何切换默认样式和指定样式
6.如何通过fn设置切换规则


//获取html中css样式
/**
$(function(){
alert($("#box").css("color"));
})
*/


//设置单个css样式
/**
$(function(){
$("#box").css("color","yellow");
})


*/


//获取多个属性值
/**
$(function(){
var box=$("div").css(["width","color","height"]);
for(var i in box){
alert(i+":"+box[i]);
}
})
*/


//迭代获取多个属性值
/**
$(function(){
var box=$("div").css(["width","color","height"]);
$.each(box,function(attr,value){
alert(attr+":"+value);
})
})
*/


//each方法的应用场景
/**
$(function(){
$("div").each(function(index,element){
alert(index+":"+element);
});
})


*/
//连缀设置多个属性值
/**
$(function(){
$("div").css('color','gray').css('height','200px');
})
*/


//类css设置多个属性值
/**
$(function(){
$('div').css({
'width':'300px',
'height':'300px',
'color':'blue'
});
})
*/
//计算方式叠加设置css样式
/**
$(function(){
$('div').css('width',function(index,value){
return parseInt(value)+200+'px';
  })
})
*/
原创粉丝点击