用javascript和jQuery实现对标签设置属性

敲代码敲到头发茂密

已于 2024-02-18 16:47:59 修改

阅读量651

点赞数 2

分类专栏：前端学习之路 # JavaScript 文章标签： javascript jquery css3

于 2022-01-22 07:00:00 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122570734

版权

前端学习之路同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

在这里插入图片描述

用javascript和jQuery实现对标签设置属性

第一种方式：用js原生方法
第二种方式：用jQuery方法
优化

第一种方式：用js原生方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				border: 5px solid red;
				width: 100px;
				height: 100px;
			}
			.x{
				background-color: aquamarine;
			}
		</style>
		
		<script type="text/javascript">
			function fun1(){
				var element=window.document.getElementById("d1")
				element.setAttribute("class",x)
				
				
			}
		</script>
	</head>
	<body onload="fun1()">
		<div id="d1"></div>
	</body>
</html>

第二种方式：用jQuery方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				border: 5px solid red;
				width: 100px;
				height: 100px;
			}
			.x{
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			function fun1(){
				var element=$("#d1")
				element.addClass("x")
			}
		</script>
	</head>
	<body onload="fun1()">
		<div id="d1"></div>
	</body>
</html>

优化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.y{
				border: 5px solid red;
				width: 100px;
				height: 100px;
			}
			.x{
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			
			$(function(){	
				$("#d1").addClass("x")	
			})
		</script>
	</head>
	<body>
		<div id="d1" class="y"></div>
	</body>
</html>

对比javascript和jQuery对标签设置属性的方式得出jQuery更强大

敲代码敲到头发茂密

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
用javascript和jQuery实现对标签设置属性

给标签设置属性第一种方式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ border: 5px solid red; width: 100px; height: 100px; } </style>
复制链接

扫一扫