基本的window.document操作及实例

Posted 2020-08-19

基本的window.document操作及实例

找元素

      1.根据id找

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

      alert(d1);

     

      2.根据class找

      var d2 = document.getElementsByClassName("d");

      alert(d2[1]);

     

      3.根据标签名找

      var d3 = document.getElementsByTagName("div");

      alert(d3[0]);

     

      4.根据name找

      var d4 = document.getElementsByName("aa");

      alert(d4[0]);

     

     

      操作元素

      操作内容

           非表单元素

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

           1.获取文本

           alert(d1.innerText);

           2.设置文本

           d1.innerText = "hello";

           3.获取html代码

           alert(d1.innerHTML);

           4.设置html代码

           d1.innerHTML = "<b>加粗文字</b>";

 

           表单元素

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

           1.赋值

           b1.value = "ceshi";

           2.获取值

           alert(b1.value);

          

          

      操作属性

      1.添加属性

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

      d1.setAttribute("bs","1");

      2.获取属性

      alert(d1.getAttribute("cs"));

      3.移除属性

      d1.removeAttribute("cs");

     

      操作样式

      function showa()

      {

           1.获取样式,只能获取内联样式

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

           alert(d3.style.color);

      }

      function set()

      {

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

           2.设置样式

           d3.style.backgroundColor = "red";

      }

 

注册按钮选中可使用：

<input type="checkbox" id="ck" onclick="xiugai()" />同意

<input type="button" value="注册" id="btn" disabled="disabled" />

JS程序：

function xiugai()

{

      //找到复选框

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

      //找到按钮

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

     

      //判断复选框的选中状态

      if(ck.checked)

      {

           //移除按钮的不可用属性

           btn.removeAttribute("disabled");

      }

      else

      {

           //设置不可用属性

           btn.setAttribute("disabled","disabled");

      }

}

 

鼠标选中背景文字颜色改变：

Css样式：<style type="text/css">

#caidan{

      width:500px; height:35px; border:1px solid #60F;

     

      }

 

.xiang{

      width:100px;

      height:35px;

      text-align:center;

      line-height:35px;

      vertical-align:middle;

      float:left;

      }

 

</style>

 

Body程序：

<div id="caidan">

      <div class="xiang" onmouseover="huan(this)" >首页</div>

    <div class="xiang" onmouseover="huan(this)" >产品中心</div>

    <div class="xiang" onmouseover="huan(this)" >服务中心</div>

    <div class="xiang" onmouseover="huan(this)" >联系我们</div>

</div>

 

JS程序：

function huan(a)

{

      //将所有的项恢复原样式

      var d = document.getElementsByClassName("xiang");

      for(var i=0;i<d.length;i++)

      {

           d[i].style.backgroundColor="white";

           d[i].style.color = "black";

      }

     

      //换该元素的样式

      a.style.backgroundColor = "red";

      a.style.color = "white";

}

 

 

倒计时结束按钮可点击：

<span id="daojishi">10</span>

      <input disabled="disabled" type="button" value="注册" id="anniu" />

</div>

JS程序：

<script type="text/javascript">

     

     

      window.setTimeout("daojishi()",1000);

     

      //功能：倒计时减1

      function daojishi()

      {

           //找到span

           var s = document.getElementById("daojishi");

          

           //判断

           if(parseInt(s.innerHTML)<=0)

           {

                 document.getElementById("anniu").removeAttribute("disabled");

           }

           else

           {

           //获取内容，减1之后再交给span

           s.innerHTML = parseInt(s.innerHTML)-1;

          

           //每隔一秒调一次该方法

           window.setTimeout("daojishi()",1000);

           }         

      }

     

</script>