jsDOM节点树设置style样式属性
1 <!DOCTYPE html>
js教程removechild2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <meta charset="utf-8" />
7 </head>
8 <body>
9 <ul>
10 <li id="html">html</li>
11 <li id="css">css</li><li id="js">js</li>
12 </ul>
13 <script type="text/javascript">
14//访问指定元素
15var html = ElementById("html"); //通过ID获取对象
16 html.style.fontWeight = "bold";//改变元素的样式
17var arr = ElementsByTagName("li"); //通过标签获取对象的集合
18 alert(arr.length); //共有3个
19 </script>
20
21 <script type="text/javascript">
22//访问相关的元素
23var elm = document.lastChild; //获取⽂档的最后⼀个⼦节点(html)标记
24 document.deName + "<br/>");
25
26var body = elm.lastChild; //获取(html)的(最后⼀个⼦节点)body标记
27 document.deName + "<br/>"); //最后⼀个⼦节点
28
29var head = elm.firstChild;//获取(html)的(第⼀个⼦节点)head标记
30 document.deName + "<br/>"); //第⼀个⼦节点
31
32var ul = body.childNodes[1]; //获取(body)的⼦节点数组 ul标记
33 document.deName+"<br/>");//数组第1个元素的名字
34
35var li1 = ul.childNodes[1]; //获取ul下的⼦节点数组第⼀个 li标记
36 document.deName + "<br/>");//数组第1个元素的名字
37
38var text1 = Sibling; //获取li1后⼀个兄弟节点
39 document.deName + "<br/>");//数组第个元素的名字 li //li与li之间必须紧挨着否则未定义 40//默认把换⾏当成元素; 两次获取兄弟元素
41 </script>
42
43 <div id="div1"></div>
44 <script type="text/javascript">
45//追加元素
46var div1 = ElementById("div1");//当前节点
47var newH1 = ateElement("h1");//创建元素节点(h1标签)
48var newText = ateTextNode("abcdefghijk");//创建⽂本节点
49 newH1.appendChild(newText);//将⽂本节点添加到 (h1中)
50 div1.appendChild(newH1); //将新建元素节点添加到<div>中 (作为最后⼀个节点)
51 </script>
52
53 <div id="div2">
54 <p id="p1">段落1</p>
55 <p id="p2">段落2</p>
56 </div>
57 <script type="text/javascript">
58//插⼊元素
59var newPara = ateElement("p");//创建元素节点
60var newText = ateTextNode("新段落");
61 newPara.appendChild(newText);//将⽂本节点添加到 p中
62var myDiv = ElementById("div2"); //获取⽗节点
63var para2 = ElementById("p2"); //指定插⼊位置的节点
64 myDiv.insertBefore(newPara, para2);//插⼊指定节点值前 (p2前)
65 </script>
66
67 <div id="div3">
68 <p id="p11">段落11</p>
69 <p id="p12">段落12</p>
70 </div>
71 <script type="text/javascript">
72//替换元素
73var newH1 = ateElement("h1"); //创建节点h1
74var newText = ateTextNode("标题1");//创建⽂本节点
75 newH1.appendChild(newText);//将⽂本节点添加到h1节点中
76var myDiv = ElementById("div3");//获取⽗节点
77var para1 = ElementById("p11"); //获取替换的节点
78 placeChild(newH1,para1); //把段落p11替换为标题1
79 </script>
80
81 <div id="div4">
82 <p id="p21">段落21</p>
83 <p id="p22">段落22</p>
84 </div>
85 <script type="text/javascript">
86//删除⼦节点
87var myDiv = ElementById("div4");//获取⽗节点
88var para1 = ElementById("p21");//指定要删除的节点
89 veChild(para1);//删除指定的⼦节点
90 </script>
91
92 <div id="div5"></div>
93 <script type="text/javascript">
94//元素的属性与内容操作
95var myDiv = ElementById("div5");//获取元素对象
96 myDiv.innerHTML = "<h1>asdfghjk<h1>";//设置元素⾥⾯的html内容
97 myDiv.setAttribute("style","width:380px;height:80px;border:1px solid #000;"); //为元素设置新的属性
98 </script>
99
100 <div id="div6"></div>
101 <div id="div7"></div>
102 <script type="text/javascript">
103//style属性
104var myDiv = ElementById("div6");
105 myDiv.style.width = "200px";
106 myDiv.style.height = "50px";
107 myDiv.style.border = "1px solid #000";//设置div6的样式
108var myDiv1 = ElementById("div7");
109 myDiv1.style = "width:200px;height:50px;border:1px solid #000;background-color:#000"; //设置div7的样式
110//javascript不允许在属性或⽅法名称⾥使⽤连字符；例如background-Color; 因此需要调整书写格式backgroundColor；连字符后⾯⽤⼤写111 </script>
112
113 <div id="div8"></div>
114 <script type="text/javascript">
115//className属性
116var myDiv = ElementById("div8");//获取div8对象
117 myDiv.className = "a"; //更改样式<div id="div8" class ="a"></div>
118 myDiv.className = "b"; //更改样式<div id="div8" class ="b"></div>
119 </script>
120 </body>
121 </html>
<script>
(function () { ElementsByTagName("body")[0].style.cssText = "overflow:hidden"; }) ();
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论