js学习之操作HTML的元素属性

本文详细介绍了如何使用JavaScript操作HTML元素的固有属性和自定义属性,包括获取和修改属性值的方法。通过实例演示了getElementById、getAttribute及setAttribute等API的用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html>
	<head>
		
		<title>js操作HTML的元素属性</title>
		<meta charset="UTF-8"/>
		<!--
			js操作HTML元素属性学习:
				获取元素对象
				操作元素属性
					获取:
						元素对象名.属性名//返回当前属性的属性值。----固有
						元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义
					修改
						元素对象名.属性名=属性值
						元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义
					注意:
						尽量的不要去修改元素的id值和name属性值。
					使用自定义方式获取固有属性内容,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.value="哈哈";
						inp.type="button";
				}
			
			//声明函数---自定义属性
				//获取
				function testOwnField(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//获取自定义属性的值
						alert(inp.getAttribute("abc"));
				}
				//修改
				function testOwnField2(){
					//获取元素对象
					var inp=document.getElementById("uname");
					//修改自定义属性的值
					inp.setAttribute("abc","呵呵");
				}
			//使用自定义方式操作固有属性
				function testOper(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//操作对象属性
						alert(inp.getAttribute("type"));
						alert(inp.getAttribute("value"));
				}
		</script>
	</head>
	<body>
		<h3>js操作HTML的元素属性</h3>
	<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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

playboy-jordan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值