BOM

         今天学了js的一些特效和属性原理,首先在<head></head>中建个IDdiv,那么他在js中就这么写格式:

     var d1=document.getElementById("d1");

      d1.innerHTML="";

     在这里学到了和以前有关的知识,比如style属性了,接下来就可以应用了,首先我们可以给字体添加大小,颜色,以及边框:

     d1.style="font-size:50px;"

      d1.style.color="red";

      d1.style.border="1px solid black;"

     alert(d1.style.width);

   说到选择器这个东西,有id选择器,就有class选择器,所以接下来就是class选择器:

     var d2 = document.getElementsByClassName("d2")[0];

      d2.innerHTML="ABCDEF";

     然后就是标签选择器以及innerHTML和innerTEXT的区别:

     var d3=document.getElementsByTagName("span")[0];

      d3.innerText="XYZ</br>IJK"

      期中innertext是把=后面的所有内容都变成文本输入进去,而html是能将标签读取,比如加入</br>他就会换行。

      在这里面有很多特效,特效代码前面要加on,比如onclick鼠标选定的时候,onmouseover鼠标一上去的时候,onmouseout,鼠标离开的时候。

      注册表很多时候下面有个你必须点同意条款才能进行下一步,那么那个是怎么做的呢,代码如下:

      

      <body>
      <input type="checkbox" id="ckb" /><label for="ckb">同 意</label>
      <input id="btn" type="button" value="下一步" disabled="disabled" />
      </body>

      <script>
      var ckb = document.getElementById("ckb");
      var btn = document.getElementById("btn");
      ckb.onchange = function(){
      var status = ckb.checked;
        if(status == true){
      btn.removeAttribute("disabled");
      }else{
      btn.setAttribute("disabled","disabled");
      }
      }
      </script>

      还有将一个text中的内容添加到下拉框中的:

    <body>
    <select id="slt" size="7" style="width: 100px;">
    <option>abc</option>
    <option>123</option>
    </select>
    <input type="text" id="txt" />
    <input type="button" id="btn" value="添加" />
    </body>

    <script>
    var btn = document.getElementById("btn");
    var txt = document.getElementById("txt");
    var slt = document.getElementById("slt");

    btn.onclick = function(){
    // alert(txt.value);
    var opt = document.createElement("option");
    opt.innerText = txt.value;
    slt.appendChild(opt);
    txt.value = "";

    }.

posted @ 2017-05-21 12:00  零语言  阅读(168)  评论(0编辑  收藏  举报