document對象

時間 2020-06-14

標籤 document 對象简体版

原文原文鏈接

document對象 javascript

document對象文檔操做 HTML文檔操做

**找元素

*經過ID找元素（惟一）css

*經過class找元素（經過數組取值）html

*經過標籤找元素java

*表單找元素數組

**操做內容

先找元素

獲取內容ui

修改內容this

含標籤獲取內容 spa

加其餘標籤修改內容3d

**操做屬性

先找元素

獲取屬性code

修改屬性

刪除屬性　　+

**操做樣式（只能操做內斂）

找到元素

獲取樣式

修改樣式

經過方法修改樣式

找元素

例題

選中贊成註冊可用

鼠標放上時變色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
   <style type="text/css">
        #caidan{
              width:600px;
              height:40px;
              border:1px solid #666;
                  }
        .xiang{
              width:100px;
              height:40px;
              float:left;  
              text-align:center;
              line-height:40px;
              vertical-align:middle;
                }
    </style>         
<body>
    <div id="caidan">
          <div class="xiang" onmousemove="Bian(this)" onmouseout="Hui(this)">首頁</div>
          <div class="xiang"onmousemove="Bian(this)"onmouseout="Hui(this)">首頁</div>
          <div class="xiang"onmousemove="Bian(this)"onmouseout="Hui(this)">首頁</div>
          <div class="xiang"onmousemove="Bian(this)"onmouseout="Hui(this)">首頁</div>
          <div class="xiang"onmousemove="Bian(this)"onmouseout="Hui(this)">首頁</div>
          <div class="xiang"onmousemove="Bian(this)"onmouseout="Hui(this)">首頁</div>
     </div>     
</body>
<script type="text/javascript">
        function Bian(a)
        {
            a.style.backgroundColor = "red";
            a.style.color = "#fff";
        }
        function Hui(a)
        {
            a.style.backgroundColor = "#fff";
            a.style.color = "#000";
        }
</script>
</html>

等待十秒可註冊

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 </head>
 7 
 8 <body>
 9 <span>10</span>
10 <input type="button" value="註冊" disabled="disabled" id="btu"/>
11 </body>
12 <script type="text/javascript">
13     window.setTimeout("Zhu()",1000);
14     function Zhu()
15     {
16          var shu = document.getElementById("shu");
17          if(parseInt(shu.innerHTML)<=0)
18          {
19              document.getElementById("btu").removeAttribute("disabled");
20              
21           }
22           else
23           {
24               shu.innerHTML = parseInt(shu.innerHTML)-1;
25               window.setTimeout("Zhu()",1000);
26             }
27      }
28 </script>
29 </html>