原生js的屬性操作

原生js對於我來說確實用的很少，但是今天就想着把原生的js的一些基礎知識重新復習一下，畢竟現在關於的原生js的一些插件再復雜也是萬變不離其綜。

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

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

<input type="text" id="Text" value="" name=""/>
<select id="Select">
    <option value="北京">北京</option>
    <option value="杭州">杭州</option>
</select>
<input id="Btn" type="button" value="按鈕" name=""/>

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

而我想要的效果是“按鈕”，“按鈕”兩個字變“btn”，然后input框中寫入select框中的內容，那么js是這樣寫的：

<script>
    window.onload= function(){
        var oText=document.getElementById("Text");
        var oSelect=document.getElementById("Select");
        var oBtn=document.getElementById("Btn");
        oBtn.onclick=function(){
            oBtn.value="btn";
            oText.value=oSelect.value;
        };
    }
</script>

 點擊后效果圖如下：

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

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

布局很簡單如圖所示：

接下來看js的寫法：

<script>
    window.onload= function(){
        var oPtxt=document.getElementById("p1");
        var oText=document.getElementById("text1");
        var oBtn=document.getElementById("Btn");
        oBtn.onclick = function(){
            oText.value  = oPtxt.innerHTML
        };
    }
</script>

 效果如下：

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