js动态给元素添加属性

最新推荐文章于 2024-12-06 13:13:37 发布

前端-文龙刚

最新推荐文章于 2024-12-06 13:13:37 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_17211063/article/details/128326067

Javascript 专栏收录该内容

88 篇文章

订阅专栏

最终效果：

具体代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>attr</title>
</head>
<body>
	<img src=""/>
	
	<span id="span1id">span1</span>
	<span id="span1id">span2</span>
	
	
	<input type="checkbox" />
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
	$(function(){
		$('img').attr({//利用attr给img添加src和title属性
			'src':'http://www.fpsjzx.gov.cn/static_material/sjzx/images/yes-Voice.png',
			'title':'哈哈哈'
		});
		
		//$('img').removeAttr('title');//删除img属性title
		
//		prop
		$('span').eq(0).prop({'title':'我是span1','class':'span1'});//利用prop给元素添加属性,可以添加多个
		console.log($('span').eq(0).prop('class'))//操作元素中的demo节点，
		$('span').prop('class','box');//更改元素的class
		$('span').removeProp('title');
		
//		到底在什么情况下使用prop 和 attr ?例如判断多选框是否选中：
//		如果使用attr,多选框后面如果有 checked 属性的话会返回true或者false,如果没有带 checked 的话直接返回undefined
		console.log($('input').attr('checked'));
//		如果使用 prop 属性,无论input中是否含有 checked 属性,都会返回true或者false,所以用prop判断是否选中最合适
		console.log($('input').prop('checked'))
			
	});
</script>