首页 > 代码库 > 节点的属性
节点的属性
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" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>节点的属性</title> 6 <style> 7 .set{ 8 width: 220px; 9 border: 1px solid #ccc; 10 background-color: #f0f0f0; 11 padding: 10px; 12 position: fixed; 13 right: 200px; 14 top: 300px; 15 } 16 h2{ 17 color: #000; 18 height: 16px; 19 line-height: 16px; 20 } 21 </style> 22 <script> 23 // 改变层的外观 24 function change_div_style() 25 { 26 var node_body = document.body;//访问body节点 27 var node_div = node_body.firstChild;//第一个子节点 28 // 整个body的样式设置 29 var style = "width:600px;padding:20px;border:1px solid #f00;"; 30 style +="margin:0px auto;background-color:#f0f0f0"; 31 //setAttribute(name,value) 给一个节点增加属性 name是属性名 value是属性值 32 node_div.setAttribute("style",style); 33 } 34 // 移除层的外观 35 function remove_div_style() 36 { 37 var node_body = document.body;//访问body节点 38 //将第一个子节点赋值给一个变量 39 var node_div = node_body.firstChild; 40 // removeAttribute删除节点的属性 41 node_div.removeAttribute("style"); 42 } 43 // 改变标题的外观 44 function change_h2_style() 45 { 46 var node_body = document.body;//访问body节点 47 var node_div = node_body.firstChild; 48 var node_h2 = node_div.firstChild; 49 var style = "color:#f00;text-align:center;"; 50 node_h2.setAttribute("style",style); 51 52 } 53 // 移除标题的外观 54 function remove_h2_style() 55 { 56 var node_body = document.body;//访问body节点 57 var node_div = node_body.firstChild; 58 var node_h2 = node_div.firstChild; 59 node_h2.removeAttribute("style"); 60 } 61 // 改变内容的外观 62 function change_p_style() 63 { 64 var node_body = document.body;//访问body节点 65 var node_div = node_body.firstChild; 66 var arr = node_div.childNodes;//子节点列表是一个数组 67 // 遍历所有p标记 68 for(var i=1;i<arr.length;i++) 69 { 70 arr[i].setAttribute("style","color:#00f;text-indent:2em;"); 71 } 72 73 } 74 // 移除内容的外观 75 function remove_p_style() 76 { 77 var node_body = document.body; 78 var node_div = node_body.firstChild; 79 var arr = node_div.childNodes; 80 for(var i=1;i<arr.length;i++) 81 { 82 arr[i].removeAttribute("style"); 83 } 84 85 } 86 </script> 87 </head><!-- 中间不能有空格 --> 88 <body><div><h2>土耳其伊斯坦布尔爆炸29死166伤</h2><p>当地时间10日夜间，土耳其伊斯坦布尔新城区塔克西姆广场附近发生2起爆炸，该起爆炸为汽车炸弹袭击，造成29人死亡，至少166人受伤。土耳其内政部确认，这两起汽车爆炸袭击都是针对防爆警察。土耳其交通部长阿斯兰在社交网站上说，这是一起恐怖主义袭击。土耳其境内近来频频遭受恐怖袭击，“伊斯兰国”武装分子和库尔德左翼极端分子分别宣称对其中的一些袭击负责。</p><p>爆炸发生后，中国驻伊斯坦布尔总领馆称，目前没有接到中国人伤亡的消息，建议中国游客近期不要赴土；在土游客，尽量不要外出，不要去人流密集的地方。中国领馆工作人员告诉，建议游客不要来到土旅游，希望在土中国游客，尽快离开土耳其</p></div> 89 <div class="set"> 90 <!-- 点击时调用函数 --> 91 <input type="button" value="改变层的外观" onclick="change_div_style()" /> 92 <input type="button" value="移除层的外观" onclick="remove_div_style()" /> 93 <input type="button" value="改变标题外观" onclick="change_h2_style()" /> 94 <input type="button" value="移除标题外观" onclick="remove_h2_style()" /> 95 <input type="button" value="改变内容外观" onclick="change_p_style()" /> 96 <input type="button" value="移除内容外观" onclick="remove_p_style()" /> 97 </div> 98 </body> 99 </html>
节点的属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。