使用jquery可不可以加样式

这篇文章给大家分享的是有关使用jquery可不可以加样式的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

下陆ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

用jquery可以加样式，方法：1、使用“$(元素).attr("style","行内样式代码")”语句；2、使用“$(元素).css({"属性名":"属性值"})”语句；3、使用“$(元素).addClass("class名称")”语句。

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

在jquery中，有多种方法可以给元素添加样式，下面介绍几种：

方法1：使用attr()方法添加行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
			  $("button").click(function(){
				$("p").attr("style","border: 2px solid green; background-color: #55aa7f;color: white;");
			  });
			});
		</script>
	</head>
	<body>
		<p>hello，测试文字</p>
		<button>添加样式</button>
	</body>
</html>

使用jquery可不可以加样式

方法2：使用css()方法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
			  $("button").click(function(){
				$("p").css({"border": "1px solid red","background-color": "#FFC0CB","color": "white"});
			  });
			});
		</script>
	</head>
	<body>
		<p>hello，测试文字</p>
		<button>添加样式</button>
	</body>
</html>

使用jquery可不可以加样式

方法3：使用addClass方法

addClass() 方法向被选元素添加一个或多个类。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
			  $("button").click(function(){
				$("p").addClass("intro");
			  });
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>hello，测试文字</p>
		<button>添加样式</button>
	</body>
</html>

使用jquery可不可以加样式

感谢各位的阅读！关于“使用jquery可不可以加样式”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网页名称：使用jquery可不可以加样式
文章位置：https://www.cdcxhl.com/article28/ihgecp.html

成都网站建设公司_创新互联，为您提供响应式网站、做网站、网站维护、网站营销、标签优化、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容