jQuery操作css

最新推荐文章于 2025-06-26 11:15:58 发布

转载最新推荐文章于 2025-06-26 11:15:58 发布 · 180 阅读

本文介绍了如何使用jQuery操作元素的CSS样式及类属性，包括更改样式、添加和删除类等方法，并通过实例展示了不同场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作CSS样式
css(css)
css(css,val)
css({css1:val1,css2,val2,…..})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM编程-操作CSS</title>
<style type="text/css">
li{
font-size: 12px;
color: #ffffff;
background-color:gray;
border-radius:5px;
height: 33px;
width:104px;
text-align: center;
line-height:38px;
list-style:none;
float:left;
}



</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面加载完后给所有的li绑定事件
$(function(){
//给所有的li绑定over事件
$("li").mouseover(function(){
//$(this).css("font-size","16px");
//$(this).css("color","yellow");
//$(this).css("background-color","red");
$(this).css("font-size","16px").css("color","yellow").css("background-color","red");

});

//给所有的li绑定out事件
$("li").bind("mouseout",function(){
//                   $(this).css("font-size","12px");
//                   $(this).css("color","#ffffff");
//                   $(this).css("background-color","gray");
$(this).css({"font-size":"12px","color":"#ffffff","background-color":"gray"});//JSON
});
});
</script>
</head>
<body>
<ul>
<li>前端技术</li>
<li>编程技术</li>
<li>数据库</li>
</ul>
</body>
</html>

操作类样式
hasClass(class)
addClass(class) addClass() 追加类样式，而不是覆盖类样式
removeClass(class)
toggleClass(class)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM编程-操作CSS</title>
<style type="text/css">
li{
font-size: 12px;
color: #ffffff;
background-color:gray;
border-radius:5px;
height: 33px;
width:104px;
text-align: center;
line-height:38px;
list-style:none;
float:left;
}

.over{
font-size: 16px;
color: yellow;
background-color:red;
}
.out{
font-size: 12px;
color: #ffffff;
background-color:gray;
}

</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面加载完后给所有的li绑定事件
$(function(){
//给所有的li绑定over事件
$("li").mouseover(function(){
$(this).removeClass("out");
$(this).addClass("over");
//this.className ="over";
});

//给所有的li绑定out事件
$("li").bind("mouseout",function(){
//$(this).removeClass("over");
//$(this).addClass("out");
$(this).removeClass("over").addClass("out");
});
});
</script>
</head>
<body>
<ul>
<li>前端技术</li>
<li>编程技术</li>
<li>数据库</li>
</ul>
</body>
</html>

操作类样式
hasClass(class)
addClass(class) addClass() 追加类样式，而不是覆盖类样式
removeClass(class)
toggleClass(class)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作-操作CSS</title>
<style type="text/css">
.myClass{
background-color: #A5E5AA;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("p").click(function(){
/*
if($(this).hasClass("myClass")){

$(this).removeClass("myClass");
}else{
$(this).addClass("myClass")
}*/
$(this).toggleClass("myClass");
});
});
</script>
</head>
<body>
<p>阿里巴巴：马云</p>
<p>腾讯：马化腾</p>
<p>百度：李彦宏、马东敏</p>
<p>京东：刘强东</p>
<p>小米：雷军 </p>
</body>
</html>