h5自定义属性

最新推荐文章于 2024-02-08 21:26:12 发布

李常常查德

最新推荐文章于 2024-02-08 21:26:12 发布

阅读量1.7k

点赞数

分类专栏：个人总结文章标签： H5

本文链接：https://blog.csdn.net/qq_36330972/article/details/88876195

版权

个人总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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; 	//h5获取的方法
			console.log(a);
			a.name = "我修改一下自定义属性";
			console.log(a);
			// alert($('#a').data('name')); 
			console.log($('#a').data('name'));			//jquery获取的第一种方法
			console.log($('#a').attr('data-name'));		//jquery获取的第二种方法
			$('#a').data('name','我用jquery改一下');
			// jquery的修改方法在dom上不显示，只会改变内存地址中的值
			// h5的修改方法在dom元素上就可以显示出来 

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

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

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

字太多，直接写结论

如果使用h5自带的方法获取data-*，那么就document.querySelector('#a').dataset，这句代码返回的是一个id为a的元素的所有data-*的数组集合。当然，你要是想要获取name的值，那么你就使用document.querySelector('#a').dataset.name。
如果使用jquery的方法获取data-*，那么就$('a').data('name')或$('a').attr('data-name')，返回id为a的元素的data-name的值。
对了，要是你在博客中(markdown)直接打*是有可能被屏蔽的，因为*是转移字符。想要打上去就使用\*。

最后:

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

李常常查德

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5自定义属性

h5中自定义属性的使用引言: 我们在很多场景中，都需要把后端的数据保留下来，如果使用setAttribute方法确实也能做到，但是我们今天要讲的是h5内置的一个自定义属性的使用data-*。运行后如上图所示。由于jquery中修改自定义属性是在内存区域修改，所以在dom元素上是不会显示出来修改的值。h5是在dom元素上修改自定义属性，打开开发人员面板就可以看到在元素上data-n...
复制链接

扫一扫