JavaScript文档对象模型document对象获取自定义属性值和设置移除自定义属性(5)

在这里插入图片描述
得出结论：element .属性只能获取内置对象属性值，而element.getAtrribute(‘属性’)不仅可以获取内置对象属性值，还可以获取自定义属性值

获得属性值案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<!-- id是内置对象属性  index是自定义属性，因为html中没有这个属性的存在 -->
		<div id="c4" index="1"></div> 
		<script>
			//获得元素对象
			var div = document.querySelector('div');
			//元素对象.属性  是用来获取内置对象的属性
			console.log(div.id)
			//元素对象.getAttribute('属性') 是用来获取自定义属性的值
			console.log(div.getAttribute('index'));
		</script>
	</body>
</html>

在这里插入图片描述

得出结论：element .属性=‘值’ 只能设置内置对象属性值，而element.setAtrribute(‘属性’,‘属性值’) 不仅可以设置内置对象属性值，还可以设置自定义属性值

设置属性值案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<!-- id是内置对象属性  index是自定义属性，因为html中没有这个属性的存在 -->
		<div id="c4" index="1" class="dis"></div> 
		<script>
			//获得元素对象
			var div = document.querySelector('div');
			//想要获取类名必须用className，因为class是一个关键字
			console.log(div.className); 
			//设置元素对象属性
			div.className='c4';
			console.log(div.className); 
			//class特殊这里面写的是class而不是className
			div.setAttribute('class' , 'c5');  
			console.log(div.getAttribute('class'));
		</script>
	</body>
</html>

在这里插入图片描述
移除属性案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<!-- id是内置对象属性  index是自定义属性，因为html中没有这个属性的存在 -->
		<div id="c4" index="1" class="dis"></div> 
		<script>
			//获得元素对象
			var div = document.querySelector('div');
			//移除属性removeAttribute('属性');
			div.removeAttribute('id');
		</script>
	</body>
</html>

JavaScript文档对象模型document对象获取自定义属性值和设置移除自定义属性(5)

猜你喜欢