前端学习——js操作HTML的元素属性

最新推荐文章于 2024-05-12 10:57:12 发布

野生小米椒

最新推荐文章于 2024-05-12 10:57:12 发布

阅读量875

点赞数

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/88912010

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作HTML的元素属性</title>
		<!--
			js操作HTML元素属性学习：
			 获取元素对象
			 操作元素属性
			     获取：
			        元素对象名.属性名//返回当前属性的属性值---固有
			        元素对象名.getAttribute("属性名");//返回自定义属性的值------自定义
			     修改：
			     元素对象名.属性名=属性值
			     元素对象名.setAttribute("属性名"，"属性值");//修改自定义属性的值----自定义
			      注意： 尽量的不要去修改元素的name和id值
			                  使用自定义方式获取固有属性内容，value的值获取的是默认值，不能获取到实时的用户值
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
		//声明函数--固有属性
		//获取元素属性值
		function testField(){
			//获取元素对象
			var inp=document.getElementById("uname");
			//获取元素属性
			alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
		}
		//修改元素对象
		function testField2(){
			var inp=document.getElementById("uname");
			inp.type="button";
			inp.value="哈哈哈";
		}
		//声明函数---自定义属性
		//获取自定义属性
		function testOwnField(){
			//获取元素对象
			var inp=document.getElementById("uname");
			//获取自定义属性的值
			alert(inp.getAttribute("abc"));
			}
		//修改自定义属性
		function testOwnField2(){
			var inp=document.getElementById("uname");
			//修改自定义属性的值
			inp.setAttribute("abc","呵呵");
			alert(inp.getAttribute("abc"));
		}
			
			//使用自定义方式操作固有属性
			function testOper(){
				var inp=document.getElementById("uname");
				alert(inp.getAttribute("type"));
			}
			
		</script>
	</head>
	<body>
		<h3>js操作HTML的元素属性</h3>
		<hr />
		<input type="button" name="" id="" value="测试获取元素属性"  onclick="testField()"/>
		<input type="button" name="" id="" value="测试修改元素属性"  onclick="testField2()"/>
		<input type="button" name="" id="" value="测试获取自定义属性"  onclick="testOwnField()"/>
		<input type="button" name="" id="" value="测试修改自定义属性"  onclick="testOwnField2()"/>
		<input type="button" name="" id="" value="测试使用自定义方式操作固有属性"  onclick="testOper()"/>
		<hr />
		用户名：<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
		
	</body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——js操作HTML的元素属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作HTML的元素属性</title> <!-- js操作HTML元素属性学习：获取元素对象操作元素属性获取：元素...
复制链接

扫一扫