如何在jQuery中动态添加/删除CSS类

最新推荐文章于 2022-12-07 14:43:53 发布

cyan20115

最新推荐文章于 2022-12-07 14:43:53 发布

阅读量435

点赞数

文章标签： javascript ViewUI

jQuery带有addClass（）和removeClass（）来动态添加或删除CSS类。例如，

$（'＃para1'）。addClass（'highlight'）; –向包含“ para1”的id的元素添加“突出显示” css类。
$（'＃para1'）。removeClass（'highlight'）; –从包含“ para1”的id的元素中删除“突出显示” css类。

例

<html>
<head>
<style type="text/css">
  .highlight { 
  	background:green;
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery add / remove css class example</h1>
	
  <p id="para1">This is paragraph 1</p>
  <p>This is paragraph 2</p>
  <p>This is paragraph 3</p>
  <p>This is paragraph 4</p>
  
  <button id="addClass">Add highlight</button>
  <button id="removeClass">Remove highlight</button>
  
<script type="text/javascript">
	
    $("#addClass").click(function () {
		
	  $('#para1').addClass('highlight');
	  
    });
	
    $("#removeClass").click(function () {
		
	  $('#para1').removeClass('highlight');
	  
    });
	
</script>
</body>
</html>

试试演示

标签： CSS jQuery

翻译自: https://mkyong.com/jquery/how-to-add-remove-css-class-dynamically-in-jquery/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cyan20115

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在jQuery中动态添加/删除CSS类

jQuery带有addClass（）和removeClass（）来动态添加或删除CSS类。例如， $（'＃para1'）。addClass（'highlight'）; –向包含“ para1”的id的元素添加“突出显示” css类。 $（'＃para1'）。removeClass（'highlight'）; –从包含“ para1”的id的元素中删除“突出显示” css类。例...
复制链接

扫一扫