js document-操作元素属性

àì夳堔傛蜴生んèń 2021-07-24 19:35 477阅读 0赞

**操作元素固有属性**
    	查看
    		获取对象后通过.的方式获取
    			var inp=document.getElementById("uname")
    			alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
    	
    	
    	修改
    		对象名.=修改值
    			var inp=document.getElementById("uname");
    			inp.value="哈哈";
    			
    			
    **操作元素自定义属性**
    	查看
    		对象名.getAttribute("自定义属性名称");
    				<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
    				var inp=document.getElementById("uname");
    				alert(inp.getAttribute("abc"));    //会报undefined
    			
    			自定义属性不能通过.属性名来获取
    	 			<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
    				var inp=document.getElementById("uname");
    				alert(inp.abc);    //会报undefined
    				
    			
    	修改
    		对象名.setAttribute("属性名",修改值);    操作的是行内样式，不是css域的样式
    		
    			var inp=document.getElementById("uname");
    			inp.setAttribute("abc","呵呵");
    			alert(inp.getAttribute("abc"));
    			
    			css属性
    			inp.setAttribute('style','属性值:值')
    			类属性
    			inp.setAttribute('class','无.的类名');
    	
    删除
    	对象名.removeAttribute("属性名")
    	
    判断是否有该属性
    	对象名.hasAttribute("属性名')      //返回布尔值

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>js document操作元素属性</title>
    		<script type="text/javascript">
    			function t1()
    			{ 
    				var inp=document.getElementById("uname");
    				alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
    			}
    			function t2()
    			{ 
    				var inp=document.getElementById("uname");
    				inp.value="哈哈";
    				
    			}
    			function t3()
    			{ 
    				var inp=document.getElementById("uname");
    				alert(inp.getAttribute("abc"));
    			}
    			function t4()
    			{ 
    				var inp=document.getElementById("uname");
    				inp.setAttribute("abc","呵呵");
    				alert(inp.getAttribute("abc"));
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="查看元素属性" onclick="t1()" />
    		<input type="button" value="修改元素属性" onclick="t2()" />
    		<input type="button" value="查看自定义属性" onclick="t3()" />
    		<input type="button" value="修改自定义属性" onclick="t4()" />
    		<hr />
    		用户名: <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
    		
    		
    		
    	</body>
    </html>