JavaScript(二)

來源:互聯網
上載者:User

標籤:出錯   就會   javascrip   code   red   value   inner   傳智播客   span   

擷取元素方法一

可以使用內建對象document上的getElementById方法來擷取頁面上設定了id屬性的元素,擷取到的是一個html對象,然後將它賦值給一個變數,比如:

<script type="text/javascript">    var oDiv = document.getElementById(‘div1‘);</script>....<div id="div1">這是一個div元素</div>

上面的語句,如果把javascript寫在元素的上面,就會出錯,因為頁面上從上往下載入執行的,javascript去頁面上擷取元素div1的時候,元素div1還沒有載入,解決方案有兩種:

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

....<div id="div1">這是一個div元素</div>....<script type="text/javascript">    var oDiv = document.getElementById(‘div1‘);</script></body>

第二種方法:將javascript語句放到window.onload觸發的函數裡面,擷取元素的語句會在頁面載入完後才執行,就不會出錯了。

<script type="text/javascript">    window.onload = function(){        var oDiv = document.getElementById(‘div1‘);    }</script>....<div id="div1">這是一個div元素</div>
操作元素屬性

擷取的頁面元素,就可以對頁面元素的屬性進行操作,屬性的操作包括屬性的讀和寫。

操作屬性的方法 
1、“.” 操作
2、“[ ]”操作

屬性寫法

1、html的屬性和js裡面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性裡面的屬性,有橫杠的改成駝峰式,比如:“font-size”,改成”style.fontSize”

通過“.”操作屬性:

<script type="text/javascript">    window.onload = function(){        var oInput = document.getElementById(‘input1‘);        var oA = document.getElementById(‘link1‘);        // 讀取屬性值        var val = oInput.value;        var typ = oInput.type;        var nam = oInput.name;        var links = oA.href;        // 寫(設定)屬性        oA.style.color = ‘red‘;        oA.style.fontSize = val;    }</script>......<input type="text" name="setsize" id="input1" value="20px"><a href="http://www.itcast.cn" id="link1">傳智播客</a>

通過“[ ]”操作屬性:

<script type="text/javascript">    window.onload = function(){        var oInput1 = document.getElementById(‘input1‘);        var oInput2 = document.getElementById(‘input2‘);        var oA = document.getElementById(‘link1‘);        // 讀取屬性        var val1 = oInput1.value;        var val2 = oInput2.value;        // 寫(設定)屬性        // oA.style.val1 = val2; 沒反應        oA.style[val1] = val2;            }</script>......<input type="text" name="setattr" id="input1" value="fontSize"><input type="text" name="setnum" id="input2" value="30px"><a href="http://www.itcast.cn" id="link1">傳智播客</a>

innerHTML 
innerHTML可以讀取或者寫入標籤包裹的內容

<script type="text/javascript">    window.onload = function(){        var oDiv = document.getElementById(‘div1‘);        //讀取        var txt = oDiv.innerHTML;        alert(txt);        //寫入        oDiv.innerHTML = ‘<a href="http://www.itcast.cn">傳智播客<a/>‘;    }</script>......<div id="div1">這是一個div元素</div>

 

JavaScript(二)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.