（七）文件物件模型（DOM）（下）
阿新 • • 發佈：2019-01-03
1.讀寫資料
setAttribute()新增屬性，getAttribute()獲取屬性，removeAttribute()刪除屬性。
2.顯示和隱藏
修改DOM Element的style屬性的 visibility屬性會使元素變得不可見，但仍舊佔據應有的位置，而display屬性不僅將元素不可見，而且不再佔位置。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 3.改變顏色和大小
style的color屬性改變文字顏色；backgroundColor：背景顏色；width和height控制元素大小。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>改變顏色和大小</title>
</head>
<body>
<div id="text">
EDAZH-edazh
</div>
<script type="text/JavaScript">
function fun(){
text.style.fontSize=16+Math.floor(Math.random()*88)+'px';
//改變字型大小
text.style.lineHeight=1.2;//行高取文字高度的1.2倍
//生成3個隨機數來代表R,G,B三原色
var c1=Math.floor(Math.random()*256);
var c2=Math.floor(Math.random()*256);
var c3=Math.floor(Math.random()*256);
text.style.color='rgb('+c1+','+c2+','+c3+')';
//隨機改變文字的顏色
var timer=setTimeout(fun,1000);//1秒鐘重新整理一次
}
fun();
</script>
</body>
</html>4.改變位置
style的top和left屬性決定了DOM元素左上角的座標，利用程式改變他們的值可以實現元素移動的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>改變位置</title>
</head>
<body>
<span id="round" style="position:absolute;left:100px;top:100px">
edazh
</span>
<script type="text/JavaScript">
//r存放圓的半徑，單位為畫素點
var r=100;
//ins表示圓的弧度
var ins=1;
//Circle()用來繪製圓的軌跡
function Circle(){
//用引數方程描述圓的軌跡
x=r*Math.cos(ins)+100;
y=r*Math.sin(ins)+100;
//每次呼叫弧度增加0.02
ins+=0.02;
//用style.left和style.top屬性控制元素的位置
round.style.left=x+'px';
round.style.top=y+'px';
}
//用計時器讓圓的位置沿著圓周1毫秒變化一次,看起來像在轉圈
setInterval(Circle,1);
</script>
</body>
</html>5.編輯控制
style的readOnly和disabled屬性控制他們的編輯模式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>編輯控制</title>
</head>
<body>
<form>
姓名：<input name="name" /><br/>
密碼：<input name="password" type="password"/><br/><br/>
<input type="submit"/> <input type="reset"/><br/>
<button onclick="readOnly(); return false;">只讀</button>
<button onclick="disable(); return false;">禁用</button>
<button onclick="enable(); return false;">允許編輯</button>
</form>
<script type="text/JavaScript">
function readOnly(){
document.forms[0].name.readOnly=true;
document.forms[0].password.readOnly=true;
}
function disable(){
document.forms[0].name.disabled=true;
document.forms[0].password.disabled=true;
}
function enable(){
//啟用將所有表單的readonly屬性和disabled置為false
document.forms[0].name.readOnly=false;
document.forms[0].password.readOnly=false;
document.forms[0].name.disabled=false;
document.forms[0].password.disabled=false;
}
</script>
</body>
</html>6.改變樣式
改變style的className屬性可以方便的改變DOM元素的css型別。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>改變樣式</title>
<style type="text/css">
.out{display:none;}
.over{
list-style:none;
position:absolute;
left:10px;
top:33px;
border-bottom:3px #036 solid;
display:block;
}
</style>
<script type="text/JavaScript"></script>
</head>
<body>
<ul class="navul">
<li onmouseover="id1.className='over'" onmouseout="id1.className='out'">
公司產品
</li>
<ul id="id1" class="out">
<li><a href="#">辦公裝置</a></li>
<li><a href="#">會議裝置</a></li>
<li><a href="#">文藝裝置</a></li>
<li><a href="#">門禁考勤</a></li>
<li><a href="#">集團電話</a></li>
<li><a href="#">辦公裝置</a></li>
<li><a href="#">消耗用品</a></li>
</ul>
</ul>
</body>
</html>