document操作HTML的元素属性

最新推荐文章于 2024-01-08 09:09:36 发布

you些话

最新推荐文章于 2024-01-08 09:09:36 发布

阅读量588

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44805105/article/details/110917644

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作HTML的元素属性</title>
	</head>
	<script type="text/javascript">
		//声明函数--固有属性
		function testFieId(){
			//获取元素对象
			var inp=document.getElementById("uname");
			//获取元素属性
			alert(inp.type+":"+inp.name+":"+inp.value);
		}
		//修改元素属性值
		function testFieId2(){
			//获取元素对象
			var inp=document.getElementById("uname");
			//修改元素属性
			inp.value="哈哈";
			inp.type="button";
		}
		//声明函数--自定义属性
		    //获取
		          function testOwnFieId(){
		          	//获取元素对象
		          	var inp=document.getElementById("uname");
		          	//获取自定义属性的值
		          	alert(inp.getAttribute("abc"));
		          }
		    //修改 
		    function testOwnFieId2(){
		    	//获取元素对象
		    	var inp=document.getElementById("uname");
		    	//修改自定义属性的值
		    	inp.setAttribute("abc","呵呵");
		    }
	//修改自定义方式操作固有属性
		   function testOper(){
		   	//获取元素对象
		   	var inp=document.getElementById("uname");
		   	//操作对象属性
		   	alert(inp.getAttribute("type"));
		   	alert(inp.getAttribute("value"));
		   }
		
		
	</script>
	<body>
	<input type="button" name=""id="" value="测试获取元素属性--固有"onclick="testFieId();" />
	<input type="button" name=""id="" value="测试修改元素属性--固有"onclick="testFieId2();" />
	<input type="button" name=""id="" value="测试获取元素属性--自定义"onclick="testOwnFieId();" />
	<input type="button" name=""id="" value="测试修改元素属性--自定义"onclick="testOwnFieId2();" />
	<input type="button" name=""id="" value="测试操作元素自定义操作固有属性"onclick="testOper();" />
	
	<hr />
	用户名：<input type="text" name="uname" id="uname" value="" abc="嘿嘿" />
	</body>
</html>

js操作HTML元素属性学习：
获取元素对象
操作元素属性
获取：
元素对象名.属性名//返回当前属性的属性值。----固有
元素对象名.getAttribute(“属性名”);//返回自定义属性的值-----自定义
修改
元素对象名.属性名=属性值
元素对象名.setAttribute(“属性名”,“属性值”);//修改自定义属性的值----自定义
注意：
尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。

you些话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document操作HTML的元素属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作HTML的元素属性</title> </head> <script type="text/javascript"> //声明函数--固有属性 function testFieId(){ //获取元素对象 var inp=document.getEleme
复制链接

扫一扫