jquery 移除border_[WEB篇]-JQuery-04-Jquery操作CSS样式

最新推荐文章于 2022-08-15 21:20:12 发布

weixin_39996762

最新推荐文章于 2022-08-15 21:20:12 发布

阅读量65

点赞数

文章标签： jquery 移除border

本文链接：https://blog.csdn.net/weixin_39996762/article/details/112413971

版权

JQuery

Jquery操作CSS样式

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

追加样式: addClass()

移除样式: removeClass()：从匹配的元素中删除全部或指定的 class

切换样式: toggleClass()：控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

案例分析：Jquery操作css样式

代码分析：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
	<head>
		<title>6.JQuery操作CSS样式</title>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
		<style type="text/css">
			.one {
				width: 200px;
				height: 140px;
				margin: 40px;
				background: red;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}		
			div,
			span {
				width: 200px;
				height: 140px;
				margin: 40px;
				background: #9999cc;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}		
			div.mini {
				width: 30px;
				height: 30px;
				background: #CC66FF;
				border: #000 1px solid;
				font-size: 12px;
				font-family: Roman;
			}
		</style>
	</head>
	<body>
		<input type="button" value="采用属性增加样式" id="b1" />
		<input type="button" value="addclass" id="b2" />
		<input type="button" value="remove class" id="b3" />
		<input type="button" value="切换样式" id="b4" />
		<input type="button" value="has class" id="b5" />
		<h1> 天气冷了</h1>
		<h2>天气 又冷了</h2>
		<div id="one"> id 为one ***** </div>
	</body>
	<script type="text/javascript">
		/**
		 * 添加样式有两种方式实现，可以是以属性的形式添加，亦可直接addClass调用
		 * .attr("class","className");// 以属性方式添加指定样式
		 * .addClass("className");// 直接添加指定样式
		 * .removeClass("className");// 移除指定样式
		 * .toggleClass("className");// 切换样式
		 * .hasClass("className");// 判断是否包含该样式
		 */
		// <input type="button" value="采用属性增加样式" id="b1" />
		$("#b1").click(function() {
			$("#one").attr("class", "mini");
		});
		// <input type="button" value="addclass" id="b2" />
		$("#b2").click(function() {
			$("#one").addClass("mini");
		});
		// <input type="button" value="remove class" id="b3" />
		$("#b3").click(function() {
			$("#one").removeClass("mini");
		});
		// <input type="button" value="切换样式" id="b4" />
		$("#b4").click(function() {
			$("#one").toggleClass("mini");
		});
		// <input type="button" value="has class" id="b5" />
		$("#b5").click(function() {
			alert($("#one").hasClass("mini"));
		});
	</script>
</html>

结果显示：点击不同的按钮测试相应的效果

weixin_39996762

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫