（本期JavaScript到此結(jié)束蹬挤，下一波在期末后）
我的話(huà)：本節(jié)代碼較多，但都很簡(jiǎn)單调鲸，只是為了能易于應(yīng)用盛杰，故代碼完整。需有耐心吖线得！
1.innerHTML屬性
innenHTML屬性用于獲取或者替換HTML元素的內(nèi)容
語(yǔ)法：Object.innerHTML
注意：
- Object是獲取的元素的對(duì)象，如通過(guò)document.getElementById("ID")獲取的元素
- innerHTML**區(qū)分大小寫(xiě) **
例子：
通過(guò)id="con"獲取<p>元素徐伐，并輸出元素的內(nèi)容并且改變?cè)氐膬?nèi)容
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<p id="con">Hello World!</p>
<script>
var mycon = document.getElementById("con");//獲取P元素
//輸出原始內(nèi)容
document.write("p標(biāo)簽的原始內(nèi)容："+mycon.innerHTML+"<br>");
//輸入元素的新內(nèi)容贯钩，進(jìn)行更改
mycon.innerHTML = "I'm the new content!";
document.write("p標(biāo)簽修改后的新內(nèi)容："+mycon.innerHTML);
</script>
</body>
</html>
結(jié)果
2.改變HTML樣式
HTML DOM允許JavaScript改變HTML元素的樣式。
改變HTML樣式：Object.style.property = "new style";
注意：
object是獲取的元素對(duì)象办素，與通過(guò)document.getElementById("id")獲取的元素一樣角雷，都是元素對(duì)象
基本屬性表：
| 屬性 | 描述 |
|---|---|
| backgroundColor | 設(shè)置元素的背景顏色 |
| height | 設(shè)置元素的高度 |
| width | 設(shè)置元素的高度 |
| color | 設(shè)置文本的顏色 |
| font | 在一行設(shè)置所有的字體屬性 |
| font family | 設(shè)置元素的字體系列 |
| fontSize | 設(shè)置元素的字體大小 |
<h2 id="con">I love JavaScript</h2>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color = "red";
mychar.style.backgroundColor = "#CCC";
mychar.style.width = "300px";
</script>
3.顯示和隱藏 display屬性
語(yǔ)法：
object.style.display = "value";
注意：
- object是獲取的元素對(duì)象，同上
- value有none性穿、block勺三、inline、inline-block
none：此元素不會(huì)被顯示（隱藏）
block：將顯示為塊級(jí)元素（顯示）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
//var mychar = document.getElementById("con");
document.getElementById("con").style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做為一個(gè)Web開(kāi)發(fā)師來(lái)說(shuō)需曾，如果你想提供漂亮的網(wǎng)頁(yè)吗坚、令用戶(hù)滿(mǎn)意的上網(wǎng)體驗(yàn)祈远，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隱藏內(nèi)容" />
<input type="button" onclick="showtext()" value="顯示內(nèi)容" />
</form>
</body>
</html>
值得注意：這兩種寫(xiě)法都可以
document.getElementById("con").style.display = "none";
var mychar = document.getElementById("con");
mychar.style.display = "block";
4.控制類(lèi)名 className屬性
className屬性設(shè)置或者返回元素的class屬性
語(yǔ)法：object.className = classname;
作用：
- 獲取元素的class屬性
- 為網(wǎng)頁(yè)內(nèi)的某個(gè)元素指定一個(gè)CSS樣式來(lái)更改元素的外觀(guān)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶(hù)交互功能商源。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶(hù)交互功能车份。</p>
<input type="button" value="更改外觀(guān)" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
</html>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
</script>
