美文网首页
2019-04-09 属性读写

2019-04-09 属性读写

作者: 果冻_4c9b | 来源:发表于2019-04-09 20:06 被阅读0次

属性读写

 <!DOCTYPE html>
     <html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
   <body>
    <input id="test" type="text">
    <select id="city">
        <option value ="北京">北京</option>
        <option value ="上海">上海</option>
        <option value ="广州">广州</option>
    </select>
    <button id="btn" type="button" />按钮</button>
    <script type="text/javascript">
        var oBtn = document.getElementById('btn');
        var oTest= document.getElementById('test');
        var oCity= document.getElementById('city');
        
        oBtn.onclick=function(){
            oTest.value=oCity.value;
        }
           </script>
        </body>
   </html>

图片替换

   <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
       <body>
                  <input id="test" type="text"><button id="btn" type="button">替换 
           </button>
         <br>
         <img id="city" src="../20190404/img/练习六/photo-1.jpg" >
        <script type="text/javascript">
            var oBtn = document.getElementById('btn');
            var oTest= document.getElementById('test');
            var oCity= document.getElementById('city');
            
            oBtn.onclick=function(){
                oCity.src = oTest.value;
            }   
        </script>   
    </body>
</html>

内容替换

   <!DOCTYPE html>
       <html>
       <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <div id="">
        
        <input type="text" id="text" />
        <button type="button" id="btn">按钮</button>
        <p id="content">发电股份股份的规定发给对方</p>
    </div>
    
    
    <script type="text/javascript">
        var oBtn = document.getElementById('btn');
        var oText= document.getElementById('text');
        var oC= document.getElementById('content');
        
        oBtn.onclick=function(){
            oC.innerHTML+=oText.value;
             oText.value='';
        }

    </script>
    
    </body>
</html>

相关文章

网友评论

      本文标题:2019-04-09 属性读写

      本文链接:https://www.haomeiwen.com/subject/brtwiqtx.html