原生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.οnlοad= function(){
 3         var oText=document.getElementById("Text");
 4         var oSelect=document.getElementById("Select");
 5         var oBtn=document.getElementById("Btn");
 6         oBtn.οnclick=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.οnlοad= 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>

 效果如下：

是不是很简单的操作呢？以上就是我今天所写的一些简单的例子。

 

转载于:https://www.cnblogs.com/web001/p/7840806.html