document操作自定义属性

最新推荐文章于 2024-07-18 09:15:00 发布

风泊月

最新推荐文章于 2024-07-18 09:15:00 发布

阅读量4.8k

点赞数

分类专栏： Js 文章标签： js document

本文链接：https://blog.csdn.net/hello_word2/article/details/78616909

版权

Js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document获取对象2</title>
		<script type="text/javascript">
			/*
			 * js操作元素的固有属性：
			 * 		1.获取元素对象
			 *      2.获取固有属性
			 * 				对象名.属性名
			 * 		2.修改固有属性
			 * 				对象名 .属性名= 属性值
			 * 操作自定义属性
			 * 		1.获取元素对象
			 * 		2.获取自定义属性
			 * 				对象名.getAttribute("属性名");
			 * 	    3.修改自定义属性
			 * 				对象名.setAttribute("属性名","属性值");
			 * 注意：可以使用操作自定义属性的方式操作固有属性 但是不能获取实时的value值
			 */
			//获取自定义对象
			function testGetSelField(){
				var c = document.getElementById("te");
				//查看属性内容
				alert(c.getAttribute("a"));
			}
			//修改自定义属性内容
			function testUpSelField(){
				var c = document.getElementById("te");
				
				c.setAttribute("a","哇哈哈");
				
				alert(c.getAttribute("a"));
				
			}
			//使用自定义的方式操作固有属性
			function testGetOperField(){
				var c = document.getElementById("te");
				//alert(c.getAttribute("type"));
				alert(c.getAttribute("value")+":"+c.getAttribute("value"));
			}
			//使用自定义的方式修改元素的固有属性
			function testUpOperField(){
				var c = document.getElementById("te");
				c.setAttribute("type","button");
			}
			/**************************************************************/
			function getField(){
				var c = document.getElementById("te");
				
				alert(c.value+":"+c.type);
			}
			function setField(){
				var c = document.getElementById("te");
				
				c.type = "button";
			}
		</script>
	</head>
	<body>
		<h1>document获取自定义属性</h1>
		<hr />
		<input type="text" name="" id="te" value="独钓寒江雪" a = "456"/>
		<hr />
		<input type="button" name="" id="" value="测试获取元素自定义元素" οnclick="testGetSelField()"/>
		<input type="button" name="" id="" value="测试修改自定义属性内容" οnclick="testUpSelField()"/>
		<hr />
		<input type="button" name="" id="" value="测试获取元素固有属性" οnclick="testGetOperField()"/>
		<input type="button" name="" id="" value="测试修改元素固有属性" οnclick="testUpOperField()"/>
		<hr />
		<input type="button" name="" id="" value="获取固有属性" οnclick="getField()" />
		<input type="button" name="" id="" value="设置固有属性" οnclick="setField()" />
	</body>
</html>