<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>innerHTML</title>

</head>

<body>

<h2 id="con">javascript</H2>

<p> JavaScript是一種基于對象、事件驅(qū)動的簡單腳本語言，嵌入在HTML文檔中，由瀏覽器負責解釋和執(zhí)行，在網(wǎng)頁上產(chǎn)生動態(tài)的顯示效果并實現(xiàn)與用戶交互功能。</p>

<script type="text/javascript">

  var mychar=document.getElementById("con");

  document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標簽內(nèi)容

  mychar.innerHTML="Hello World!";

  document.write("修改后的標題:"+mychar.innerHTML); //輸出修改后h2標簽內(nèi)容

</script>

</body>

</html>

　　　?。?）注意：Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。

　　2.3 改變HTML樣式

　　　?。?）語法：

復制代碼代碼如下:

Object.style.property

　　　　（2）作用：用于修改HTML樣式

　　　?。?）例子：

復制代碼代碼如下:

<body>

  <h2 id="con">I love JavaScript</H2>

  <p> JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>

  <script type="text/javascript">

    var mychar= document.getElementById("con");

    mychar.style.color="red";

    mychar.style.backgroundColor="#ccc";

    mychar.style.width="300px";

  </script>

</body>

　　　　（4）注意：property有很多的樣式，比如color，height等等都可以用這個方法去修改,在一個就是不要忘記屬性后面都要加分號”“。

　　2.4 顯示和隱藏（display屬性）

　　　　（1）語法：

Object.style.display=value
　　　?。?）作用：網(wǎng)頁中?？吹斤@示和隱藏，就是用display屬性來實現(xiàn)的

　　　?。?）例子：

復制代碼代碼如下:

<script type="text/javascript">

        function hidetext() 

        { 

        var mychar = document.getElementById("con");

        mychar.style.display="none";

        } 

        function showtext() 

        { 

        var mychar = document.getElementById("con");

        mychar.style.display="block";

        }

    </script>

　　　?。?）注意：value的值為none和block，其中none為不顯示內(nèi)容，而block為顯示內(nèi)容

　　2.5 className屬性

　　　?。?）語法：

復制代碼代碼如下:

Object.className=classname

　　　　（2）作用：1.獲取元素的class屬性；2.為網(wǎng)頁中的某一個元素指定一個css樣式來改變改元素的外觀

　　　?。?）例子：

復制代碼代碼如下:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<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)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>

    <input type="button" value="添加樣式" onclick="add()"/>

    <p id="p2" class="one">JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>

    <input type="button" value="更改外觀" 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>