自定义属性值

素心如月桠

已于 2022-04-05 19:19:52 修改

阅读量343

点赞数

文章标签： javascript

于 2021-05-07 19:27:51 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/116498547

版权

html 同时被 3 个专栏收录

43 篇文章 13 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript的getAttribute和setAttribute方法来获取和设置HTML元素的自定义属性值。示例中展示了获取div元素的id以及自定义的tage_list属性，并演示了如何动态添加和改变cssTag属性值。

摘要由CSDN通过智能技术生成

一、获取属性值和自定义属性值getAttribute

<body>
	<!-- tage_list为自定义的属性值 -->
	<div id="app" class="name" tage_list="1"></div>
	<script>
		var div_l=document.querySelector('div');
		console.log(div_l.id);
		// console.log(div_1.tage_list);错误
		// 通过getAttribute获取自定义属性值
		console.log(div_l.getAttribute('tage_list'));
	</script>
</body>

在这里插入图片描述

二、设置移除自定义属性值setAttribute

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.name{
			color: red;
		}
		.name2{
			color:rgb(30, 155, 30);
		}
	</style>
</head>
<body>
	<div id="index">哈哈哈哈哈哈哈哈哈哈</div>
	<script>
		var div_d=document.querySelector('div');
		div_d.className='name';
		div_d.setAttribute('cssTag',2);
        console.log(div_d.getAttribute('cssTag'));
		div_d.setAttribute('class','name2');
        console.log(div_d.getAttribute('class'));
	</script>
	
</body>
</html>