Jquery操作样式

时间:2024-04-15 02:18:35

  1.CSS(name,value)

  修改单个样式

 $(function(){
$(".divcontent").css("background","red"); //修改背景颜色为红色
});

  2.CSS({}); 

  修改多个样式

  

 $(function(){
$(".divcontent").css({
//边框 1像素实线 红色
border:"1px solid red",
//背景颜色绿色
background:"green"
});
});

  3.Css(name);

  获取样式

  $(function(){
//返回rgb(0,0,0);
console.log($(".divcontent").css("background"));
});

  获取已设置的样式或默认的样式,如果是给多个“li”设置的样式,则返回第一个li元素的样式

  

$(function(){
$("li:first").css("fontSzie","16px");
$("li").eq(1).css("fontSize","24px");
$("li").eq(2).css("fontSize","44px");
console.log($("li").css("fontSize")); //返回16px
});

隐士迭代:偷偷的for循环

  设置的时候:会给JQ内部所有的对象都设置相同的值

  获取的时候:只会返回第一个元素对应的值

  4.class操作:

    4.1添加类:addClass("类名");               //类型不需要加.

    在原有的基础上添加类,不覆盖任何类

    4.2移除类:removeClass("类名");

    4.3判断类:hasClass("类名");

    4.4切换类:toggleClass("类名");

        <script>
//记住 click()里面是方法 加上function
//添加类
$("#p").click(function(){
$("ul").addClass("boot");
});
//移除类
$("input").eq(1).click(function(){
$("ul").removeClass("boot");
});
//判断类
$("input").eq(2).click(function(){
var a=$("ul").hasClass("boot");
if(a){
$("ul").removeClass("boot");
}else{
$("ul").addClass("boot");
}
}); //切换类
$("input").eq(3).click(function(){
$("ul").toggleClass("boot"); }); </script>