「JavaScript-2」 獲取及操作標籤

七、獲取標籤元素

1. 獲取標籤元素

可以使用內置對象 document 上的 getElementById 方法來獲取頁面上設置了id屬性的標籤元素，獲取到的是一個html對象，然後將它賦值給一個變量，比如：

<script type=&34;>    var oDiv = document.getElementById(&39;);    alert(oDiv);</script><div id=&34;>這是一個div元素</div>

說明:上面的代碼，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下加載執行的，javascript去頁面上獲取元素div1的時候，元素div1還沒有加載。

解決方法有兩種:

第一種方法：將javascript放到頁面最下邊

<div id=&34;>這是一個div元素</div><script type=&34;>    var oDiv = document.getElementById(&39;);    alert(oDiv);</script>

第二種方法：設置頁面加載完成執行的函數，在執行函數裡面獲取標籤元素。

<script type=&34;>    window.onload = function(){        var oDiv = document.getElementById(&39;);   }</script>

說明:onload是頁面所有元素加載完成的事件，給onload設置函數時，當事件觸發就會執行設置的函數。

八、操作標籤元素屬性

1. 屬性的操作

首先獲取的頁面標籤元素，然後就可以對頁面標籤元素的屬性進行操作，屬性的操作包括:

• 屬性的讀取
• 屬性的設置

屬性名在js中的寫法

0. html的屬性和js裡面屬性大多數寫法一樣，但是「class」 屬性寫成 「className」
1. 「style」 屬性裡面的屬性，有橫槓的改成駝峰式，比如：「font-size」，改成」style.fontSize」

<style>    .sty01{        font-size:20px;        color:red;   }    .sty02{        font-size:30px;        color:pink;        text-decoration:none;   }</style><script type=&34;>    window.onload = function(){        var oInput = document.getElementById(&39;);        var oA = document.getElementById(&39;);        // 讀取屬性值        var sValue = oInput.value;        var sType = oInput.type;        var sName = oInput.name;        var sLinks = oA.href;        // 操作class屬性,需要寫成「className」        oA.className = &39;;        // 寫(設置)屬性        oA.style.color = &39;;        oA.style.fontSize = sValue;   }</script><input type=&34; name=&34; id=&34; value=&34;><a href=&&34;link01&34;sty01&34;text/javascript&39;div1&39;<a href=&34;>傳智播客<a/>&34;div1">這是一個div元素</div>