h5中自定义属性的使用

引言:

我们在很多场景中，都需要把后端的数据保留下来，如果使用setAttribute方法确实也能做到，但是我们今天要讲的是h5内置的一个自定义属性的使用data-*。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>h5data</title>
</head>
<body>
	<div id="a" data-name="自定义属性"></div>
	<!-- 
		获取元素自定义属性：h5的方式=>dataset
		jquery的方式=>data 或 attr
	 -->
	<script src="jquery.min.js"></script>
	<script>
		$(function($){
			var a = document.querySelector('#a').dataset; 
			console.log(a);
			a.name = "我修改一下自定义属性";
			console.log(a);
			// alert($('#a').data('name')); 
			console.log($('#a').data());
			console.log($('#a').attr('data-name'));
			$('#a').data('name','我用jquery改一下');
			// jquery的修改方法在dom上不显示，只会改变内存地址中的值
			// h5的修改方法在dom元素上就可以显示出来 

		});
	</script>
</body>
</html>

h5自定义属性
运行后如上图所示。由于jquery中修改自定义属性是在内存区域修改，所以在dom元素上是不会显示出来修改的值。

h5是在dom元素上修改自定义属性，打开开发人员面板就可以看到在元素上data-name被修改了。

最后:

我并不是很推荐使用attr来获取data属性的值。毕竟dataset或者jquery的data方法是与自定义属性data-*配套的一套api。

h5自定义属性

h5中自定义属性的使用

引言:

最后:

相关推荐