<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>
