原生js的屬性操做

原生js對於我來講確實用的不多，可是今天就想着把原生的js的一些基礎知識從新複習一下，畢竟如今關於的原生js的一些插件再複雜也是萬變不離其綜。

先複習一下原生js的一些屬性值的添加，替換，修改等。（其實添加和替換的效果差很少）

案例1：是添加替換input中的value值，更改button的value值

1 <input type="text" id="Text" value="" name=""/>
2 <select id="Select">
3     <option value="北京">北京</option>
4     <option value="杭州">杭州</option>
5 </select>
6 <input id="Btn" type="button" value="按鈕" name=""/>

寫出來的佈局效果是這樣的

而我想要的效果是「按鈕」，「按鈕」兩個字變「btn」，而後input框中寫入select框中的內容，那麼js是這樣寫的：

 1 <script>
 2     window.onload= function(){
 3         var oText=document.getElementById("Text");
 4         var oSelect=document.getElementById("Select");
 5         var oBtn=document.getElementById("Btn");
 6         oBtn.onclick=function(){
 7             oBtn.value="btn";
 8             oText.value=oSelect.value;
 9         };
10     }
11 </script>

 點擊後效果圖以下：

案例二：更改p標籤裏的html內容寫入到input框中：

1 <input id="text1" type="text" />
2 <p id="p1">這是一些文字</p>
3 <input id="Btn" type="button" value="按鈕" name=""/>

佈局很簡單如圖所示：

接下來看js的寫法：

 1 <script>
 2     window.onload= function(){
 3         var oPtxt=document.getElementById("p1");
 4         var oText=document.getElementById("text1");
 5         var oBtn=document.getElementById("Btn");
 6         oBtn.onclick = function(){
 7             oText.value  = oPtxt.innerHTML
 8         };
 9     }
10 </script>

 效果以下：

是否是很簡單的操做呢？以上就是我今天所寫的一些簡單的例子。