jQuery 是一个JavaScript 的库,针对HTML文档的编程,助力开发者操作文档,实现动态效果。其中修改样式是jQuery的一个基础功能,今天就让我们来学习一下关于如何使用jQuery 修改样式的方法。
//CSS 方法 //通过CSS方法可以轻易地访问或修改元素的样式 //通过修改CSS属性来改变样式 //访问CSS样式 $("#example").css("background-color"); //修改CSS样式 $("#example").css("background-color", "red"); //addClass 方法 //addClass()方法是在指定的元素中添加CSS类 //可以与CSS样式制作更好的交叉效果 //添加CSS类 $("h1").addClass("headline"); //添加多个了 $("h1").addClass("headline important"); //使用函数 添加类 $("h1").addClass(function(){ if($(this).text().length >10){ return "long-title"; } }); //removeClass 方法 //removeClass()方法从指定的元素中删除CSS类 //删除单个类 $("h1").removeClass("headline"); //删除多个类 $("h1").removeClass("headline important"); //使用函数删除类 $("h1").removeClass(function(){ if($(this).text().length >10){ return "long-title"; } }); //toggleClass 方法 //toggleClass()方法可以在指定的元素中添加或移除CSS类 //可用于创建几个CSS类之间的交替效果,或者添加或删除CSS类 //如果目标元素没有该类,则添加这个类; //如果目标元素已经有该类,则从目标元素中删除这个类。 $("h1").toggleClass("headline"); //可以传递multiple classes $("h1").toggleClass("headline important"); //同时添加和删除类: $("h1").toggleClass("headline important", true);
以上就是jQuery 修改样式的基本方法,可以根据自己的需求进行选择和使用。