jQuery操作样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作样式相关的知识，希望对你有一定的参考价值。
操作样式的方法
addClass 添加样式
removeClass 移除样式
toggleClass 切换样式的显示
hasClass 判断是否应用了某样式
示例代码：鼠标进入每个p标签的时候通过样式方式添加高亮显示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery测试</title> <style type="text/css"> .cls{ background-color: gold; } </style> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> $(function () { $(‘p‘).mouseover(function () { $(this).addClass(‘cls‘).siblings().removeClass(‘cls‘); }); }); </script> </head> <body> <p>这是一个P</p> <p>这是一个P</p> <p>这是一个P</p> <p>这是一个P</p> <p>这是一个P</p> </body> </html>
效果图
网页开关灯效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<style type="text/css">
.cls{
background-color: #000000;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(function () {
$(‘#btn‘).click(function () {
$(‘body‘).hasClass(‘cls‘)?$(‘body‘).removeClass(‘cls‘):$(‘body‘).addClass(‘cls‘);
//$(‘body‘).toggleClass(‘cls‘);
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Switch"/>
</body>
</html>效果图
以上是关于jQuery操作样式的主要内容，如果未能解决你的问题，请参考以下文章