当先锋百科网

首页 1 2 3 4 5 6 7

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 修改样式的基本方法,可以根据自己的需求进行选择和使用。