標籤:出錯 就會 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(二)