關於JS的DOM操作——重要執行個體的操作

最後更新：2017-07-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：dom操作 val relative pen ons 20px 深圳 setattr 下拉

1.複選框與按鈕的配合使用的DOM操作

</body>

       <script>

           document.getElementById(‘ckb1‘).onclick = function(){
           var ckb1 = document.getElementById(‘ckb1‘);
           var btn1 = document.getElementById(‘btn1‘);

           if(ckb1.checked){
               btn1.removeAttribute(‘disabled‘);
           }
           else{
               btn1.setAttribute(‘disabled‘,‘‘);
       }
   }
       </script>

2.下拉式清單、文字框與按鈕配合使用的DOM操作（兩種方法）

<body>

<select id="skd" size="7" style="width: 100px;"></select><br>
       <select id="slt" size="7" style="width: 100px;"></select><br>
       <input type="text" id="ipt2" /><br>
       <input type="text" id="txt" /><br>
       <input type="button" id="btn2" value="添加"/>
</body>
       <script>
           //第一種方法(拼字串)

//           document.getElementById(‘btn2‘).onclick = function(){
//               var ipt2= document.getElementById(‘txt‘).value;
//               var skd = document.getElementById(‘skd‘);
//               skd.innerHTML += "<option>"+ ipt2 +"</option>";
//               document.getElementById(‘ipt2‘).value="";
//           }

           //第二種方法(造元素)

           var txt = document.getElementById(‘txt‘);
           var slt = document.getElementById(‘slt‘);

           document.getElementById(‘btn2‘).onclick = function(){
//           建立一個option對象
           var opt = document.createElement(‘option‘);
//           設定option對象的值（指向賦值）
           opt.value = txt.value;
//           設定option對象的內容
           opt.innerHTML = txt.value;
//           添加到slt（名）的對象
           slt.appendChild(opt);
       }

</script>

3.下拉式清單與按鈕的雙向交換效果

<body>

       <select id="oldSelect" size="10" multiple="multiple" style="width: 100px;float: left;position: relative">
           <option >北京</option>
           <option >上海</option>
           <option >上海</option>
           <option >深圳</option>
           <option >香港</option>
       </select>
       <select id="newSelect" size="10" multiple="multiple" style="width: 100px;float: left;margin-left: 20px;position: relative;">
           <option >籃球</option>
           <option >遊泳</option>
           <option >擊劍</option>
           <option >排球</option>
           <option >舉重</option>
       </select>

       <br><br><br><br><br><br><br><br><br><br>

       <input type="button" id="btn1" value="添加到右" style="float: left;"/>
       <input type="button" id="btn2" value="添加到左" style="float: left;margin-left: 50px;"/>

       <script>

           document.getElementById(‘btn1‘).onclick=function(){

               var oldSelect = document.getElementById(‘oldSelect‘);

                   for(var i=0;i<oldSelect.options.length;i++){
                       if(oldSelect.options[i].selected){
                       var newSelect = document.getElementById(‘newSelect‘);
                       newSelect.appendChild(oldSelect.options[i]);
                   }
               }
                   alert(oldSelect.options[oldSelect.options.length].value);
           }

               document.getElementById(‘btn2‘).onclick=function(){

               var newSelect = document.getElementById(‘newSelect‘);

                   for(var i=0;i<newSelect.options.length;i++){
                       if(newSelect.options[i].selected){
                       var oldSelect = document.getElementById(‘oldSelect‘);
                       oldSelect.appendChild(newSelect.options[i]);
                   }
               }
                   alert(newSelect.options[newSelect.options.length].value);
           }

</script>

關於JS的DOM操作——重要執行個體的操作

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More