JS-05-元素獲取

時間 2019-11-10

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #item{
 8                 width: 200px;
 9             }
10         </style>
11     </head>
12     <body>
13     <!--第一種元素獲取方法：
14        能夠使用內置對象document上的getElementById
15     方法來獲取頁面上設置了id屬性的元素，獲取到的
16     是一個html對象，而後將它賦值給一個變量-->
17     <div id="item" style="">123</div>
18     <div id="item1" style="">456</div>
19     <input type="radio" value="0" name="zzz" id = "biaodan">表單</input>
20     <input type="radio" value="1" name="zzz" id = "biaodan1">表單</input>
21     <!--<input type="checkbox" value="0" name="zzz">表單</input>-->
22     <script>
23          var odiv = document.getElementById('item').textContent;
24          console.log(odiv);
25          
26     </script>
27     
28     
29     <!--第二種元素獲取方法：
30     將JavaScript語句放到window.onload觸發的函數裏面
31     獲取元素的語句會在頁面加載完後才執行，就不會出錯
32     window指js當中最大的對象，表明窗口
33     onload指頁面加載完成以後
34     -->
35     <script type="text/javascript">
36           var odiv1;
37           var odiv2;
38           var odiv3;
39           var odiv4;
40           var odiv5;
41           window.onload = function(){
42                odiv1 = document.getElementById('item').textContent;
43                console.log(odiv1);
44                
45                odiv2 = document.getElementById('item');
46                //odiv2.style.width = "200px";
47                odiv2.style.height= "200px";
48                odiv2.style.backgroundColor = "yellow";
49                odiv2.style.fontSize = "30px"
50                
51 //               修改文本內容的兩種方式
52                odiv2.textContent = 111;
53                odiv4 = document.getElementById('item1');
54                odiv4.innerText = '<h1>333</h1>';/*innerText可用於解析文本，也可用於獲取文本*/
55                odiv4.innerHTML = '<h1>222</h1>';/*innerText可用於解析標籤，也可用於獲取標籤*/
56 //               在設置樣式的時候,若是有些屬性是雙拼詞background-color等要把中間的'-'換成第二單詞的首字母大寫
57 
58 
59                //此處獲取不到寬度。由於js獲取樣式只能獲取行間樣式，不能獲取在head標籤內寫的CSS樣式
60                odiv3 = document.getElementById('item').style.width;
61                console.log(odiv3);
62                
63 //             表單的元素獲取：
64                odiv5 = document.getElementById('biaodan');
65                console.log(odiv5.value);
66                odiv5.value=1;
67                console.log(odiv5.value)
68           }
69     </script>
70     <!--注意：script代碼段要在所獲取元素代碼段的下邊才能獲取到元素。通常建議把script代碼放在全部html代碼的最下面或者是用window.onload-->
71     </body>
72 </html>

1. js獲取元素、jQuery獲取元素、vue獲取元素
2. 獲取head元素
3. javascript獲取元素
4. 獲取子元素
5. 獲取元素值
6. JS獲取元素
7. JavaScript獲取元素
8. JavaScript獲取DOM元素
9. zepto 獲取checked selected元素
10. 【20190228】JavaScript-獲取子元素
更多相關文章...
• PHP imageaffinematrixget - 獲取矩陣 - PHP參考手冊
• XML DOM 獲取節點值 - XML DOM 教程
• Java 8 Stream 教程
• C# 中 foreach 遍歷的用法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。