js獲取元素的方法與屬性

幸福清風發表於2017-09-04
JS

js獲取元素的方法

 

可以使用內建物件document上的getElementById方法來獲取頁面上設定了id屬性的元素，獲取到的是一個html物件，然後將它賦值給一個變數

  <scripttype="text/javascript">
    var oDiv =document.getElementById('div1');

    alert(oDiv) 彈出對話方塊

  </script>

  <div id="div1">這是一個div元素</div>

但是注意:如果把上面一段程式碼放到 <head></head>中就會報錯

 

解決方法:電腦載入

  <scripttype="text/javascript">
    1.window.onload = function(){
        2.var oDiv = document.getElementById('div1');
    }

  </script>

 

<div id="div1">這是一個div元素</div>

 

js操作元素的屬性

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

 

操作屬性的方法

  • 1、“.” 操作
  • 2、“[ ]”操作

 

屬性寫法

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

 

通過點（.）獲取屬性

<scripttype="text/javascript">

1.載入：window.onload =function(){
        2.獲取：var oInput = document.getElementById('input1');
        2.獲取：var oA = document.getElementById('link1');
        3.// 讀取屬性值
        var sValue =oInput.value;
        var sType =oInput.type;
        var sName =oInput.name;
        var sLinks = oA.href;
        4.// 寫(設定)屬性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<inputtype="text" name="setsize" id="input1"value="20px">
<a href="" id="link1">百度</a>

 

通過[ ]獲取

<scripttype="text/javascript">

1.載入：window.onload= function(){
        2.獲取：var oInput1 =document.getElementById('input1');
        2.獲取：var oInput2 =document.getElementById('input2');
        2.獲取：var oA =document.getElementById('link1');
        3.// 讀取屬性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        4.// 寫(設定)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[sVal1] = sVal2;       
    }

</script>

<inputtype="text" name="setattr" id="input1"value="fontSize">
<input type="text" name="setnum" id="input2"value="30px">
<a href="" id="link1">百度</a>

通過獲取的標籤的innerHtml屬性讀寫標籤包裹的內容

  • 讀取 oDiv.innerHtml
  • 寫入 oDiv.innerHTML = "新內容"

相關文章