有俩种方式操作结点的属性。
首先我们需要先获取所要操作的结点元素：
var uname=document.getElementById("uname");
var gan=uname.getAttribute("value");
var gat=uname.getAttribute("type");俩种方法获取结点元素，根据获取的结点元素，在去操作元素的属性。
//操作属性的方式一
uname.type="button";
//操作元素的属性方式二
uname.setAttribute("value","狗蛋")操作元素结点的样式:
还是一样：先获取元素，再去操作样式：
<script>
var dv=document.getElementById("div1");
</script> function demo1(){
var h=dv.style.height;
var w=dv.style.width;
var bc=dv.style.backgroundColor;
alert(bc+"__"+h+"__"+w);
}
function demo2(){
dv.className="div2";
dv.style.height="300px";
dv.style.width="300px";
dv.style.backgroundColor="red";
}
<style type="text/css">
.div2{
border: 5px solid cornflowerblue;
}
</style>操作样式有俩种：一种是更改，还有一种是添加，添加我们就用到了className这个属性。
最后附上俩篇的完整源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04DOM中操作结点的属性</title>
<script type="text/javascript">
function show(){
var uname=document.getElementById("uname");
var va=uname.value;
var ty=uname.type;
var na=uname.name;
//alert(va+"--"+ty+"--"+na);
//操作属性的方式一
uname.type="button";
//获得元素属性(默认值)
var gan=uname.getAttribute("value");
var gat=uname.getAttribute("type");
//操作元素的属性方式二
uname.setAttribute("value","狗蛋")
//alert(gan+"****"+gat);
}
</script>
</head>
<body>
<p>
<input type="text" id="uname" value="张三" name="uname" />
</p>
<p>
<input type="button" id="" value="展示信息" οnclick="show()" />
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05DOM中操作元素结点的样式</title>
<script>
function demo1(){
var h=dv.style.height;
var w=dv.style.width;
var bc=dv.style.backgroundColor;
alert(bc+"__"+h+"__"+w);
}
function demo2(){
dv.className="div2";
dv.style.height="300px";
dv.style.width="300px";
dv.style.backgroundColor="red";
}
</script>
<style type="text/css">
.div2{
border: 5px solid cornflowerblue;
}
</style>
</head>
<body>
<div id="div1" style="background-color: aquamarine; width: 200px; height: 200px;"></div>
<p>
<input type="button" name="" id="" value="显示div的属性" οnclick="demo1()"/>
</p>
<p>
<input type="button" id="" value="改名div属性" οnclick="demo2()"/>
</p>
<script>
var dv=document.getElementById("div1");
</script>
</body>
</html>