JS-05-元素获取 

 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>

 

posted @ 2019-07-29 18:08  我只是一个码农  阅读(213)  评论(0)  编辑  收藏  举报